From b1a12d93c09fd9b4231eac45ac982c59ddae165c Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 8 Oct 2024 10:16:38 +0800
Subject: [PATCH] fix(customElement): warn if attr is tagName

---
 .../__tests__/customElement.spec.ts            | 18 ++++++++++++++++++
 packages/runtime-dom/src/apiCustomElement.ts   | 10 ++++++++++
 2 files changed, 28 insertions(+)

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index ef5051f42f..68e0f55a06 100644
--- 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
index 6ddaf89713..a0a8a3a7c3 100644
--- 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]
-- 
2.47.2