React18引入Web Component触发shadowRoot只读错误求助

错误根源 #

• 原生HTMLElement本身自带shadowRoot属性，该属性是只读状态（仅包含getter，没有setter），用于返回元素关联的shadow DOM根节点。
• 你在自定义组件类里显式声明了shadowRoot实例字段，随后在构造函数中尝试this.shadowRoot = this.attachShadow(...)，本质是强行给只读属性赋值，直接触发了TypeError。

修复方案 #

直接删除类里的shadowRoot声明即可。attachShadow()方法执行后，会自动将创建的shadow DOM根节点绑定到元素的原生shadowRoot属性上，后续直接通过this.shadowRoot访问操作即可，完全无需手动赋值。

修正后的代码示例：

class ExampleComponent extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({mode: 'open'})
        // 直接通过this.shadowRoot操作shadow DOM
        this.shadowRoot.innerHTML = '<p>这是Web Component内容</p>'
    }
    // 其他组件逻辑...
}

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

内容的提问来源于stack exchange，提问作者Frank Roth