Question

React18 与 webcomponents 一起导致 Uncaught TypeError：无法设置仅具有 gette 的 #<Element> 的属性 shadowRoot

2023-04-27

503

javascript reactjs web-component

我有一个用纯 js（不是 ts）编写的 react18 应用程序。我从另一个项目导入了一个 webcomponent，它导致以下错误：

Uncaught TypeError：无法设置只有 getter 的 #<Element> 的属性 shadowRoot

class ExampleComponent extends HTMLElement {

    shadowRoot
    
    constructor() {
        super()
        this.shadowRoot = this.attachShadow({mode: 'open'})
    }
    ...
}


window.customElements.define('example-component', ExampleComponent)

有人知道为什么会发生这种情况吗？抱歉，由于公司法律问题，我无法为您提供完整的代码示例。

Answer 1

使用 shadowRoot 可以定义一个属性

但是 attachShadow() 既会创建，也会返回 this.shadowRoot

这是您的 (React) Build 步骤发出的抱怨，在本机代码中执行此操作是可以的（但毫无意义）

customElements.define('example-component', class extends HTMLElement {
    shadowRoot // unrequired
    constructor() {
        super()
          .attachShadow({mode: 'open'})
          .innerHTML = `Hello Web Component`;
    }
})

<example-component></example-component>

Answer 2

问题是 shadowRoot 应该命名为 #shadowRoot 。只需在 shadowRoot 中添加 # 。不要问我为什么，但这解决了我的问题。

Answer 3

不要执行 this.shadowRoot ，而是将其声明为 const shadowRoot 。

Saqib Ganaie

2024-04-01