React18 与 webcomponents 导致未捕获的类型错误：无法设置属性 shadowRoot 的 #<Element> 只有一个 gette

Question

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

Uncaught TypeError: Cannot set property shadowRoot of #<Element> which has only a getter

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）构建步骤，在本机代码中这样做很好（但毫无意义）

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 中添加一个

#

。不要问我为什么，但这解决了我的问题。