fix(customElement): warn if attr is tagName

vuejs · Oct 8, 2024 · b1a12d9 · b1a12d9
1 parent 35785f3
commit b1a12d9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -1386,4 +1386,22 @@ describe('defineCustomElement', () => {
  await nextTick()
  expect(e.shadowRoot!.innerHTML).toBe(`false,boolean`)
  })
+
+ test('avoid overriding tagName', async () => {
+ const E = defineCustomElement({
+ props: {
+ tagName: {
+ type: String,
+ },
+ },
+ render() {
+ return this.tagName
+ },
+ })
+ customElements.define('el-attr-tag-name', E)
+ container.innerHTML = '<el-attr-tag-name tag-name="foo">'
+ const e = container.childNodes[0] as VueElement
+ expect(e.tagName).toBe(`EL-ATTR-TAG-NAME`)
+ expect(`[Vue warn]: Failed setting prop "tagName" `).toHaveBeenWarned()
+ })
 })
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
@@ -452,6 +452,7 @@ export class VueElement
 
  // defining getter/setters on prototype
  for (const key of declaredPropKeys.map(camelize)) {
+ if (key === 'tagName') continue
  Object.defineProperty(this, key, {
  get() {
  return this._getProp(key)
@@ -490,6 +491,15 @@ export class VueElement
  shouldReflect = true,
  shouldUpdate = false,
  ): void {
+ if (key === 'tagName') {
+ if (__DEV__) {
+ warn(
+ `Failed setting prop "${key}" on <${this.tagName.toLowerCase()}>: ` +
+ `TypeError: Cannot set property tagName of #<Element> which has only a getter`,
+ )
+ }
+ return
+ }
  if (val !== this._props[key]) {
  if (val === REMOVAL) {
  delete this._props[key]