泛型抽象类使用ShadowDOM报shadowRoot不存在ts(2339)错误

完全可以在泛型类型的抽象类中使用ShadowDOM，你收到的TS类型报错和泛型特性本身无关，是基类实现不符合Web Components规范导致的。

attachShadow、shadowRoot、appendChild、connectedCallback都是HTMLElement类型上定义的标准API/生命周期钩子，你写的抽象类B没有继承HTMLElement，TS自然会判定类实例上不存在这些属性，抛出2339类型错误。

自定义Web组件的基类必须继承HTMLElement，这是Web Components标准的硬性要求，在此基础上定义泛型不会有任何问题。

修正后的基类代码 #

abstract class B<T extends HTMLElement> extends HTMLElement {
    element: T;
    // 提前声明shadowRoot类型，避免多余非空断言
    protected override shadowRoot: ShadowRoot;

    constructor(DOM: JSDOM, componentType: string) {
        super(); // 继承HTMLElement必须首先调用super()
        this.element = <T>DOM.window.document.createElement(componentType);
        
        this.shadowRoot = this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(this.element);
    }

    async connectedCallback() {
        // 移除原逻辑中错误的this.appendChild(this.element)
        // 组件本身就是DOM节点，内容已经挂载到Shadow DOM内，不需要重复追加到光DOM
    }
}

子类继承示例 #

// 例如实现一个自定义卡片组件，内部内容节点是div类型
class MyCard extends B<HTMLDivElement> {
    constructor(DOM: JSDOM) {
        super(DOM, 'div');
        // 这里访问this.element会有完整的HTMLDivElement类型提示
        this.element.classList.add('card-content');
        this.element.textContent = '卡片内容';
    }
}

// 注册自定义元素即可正常使用
DOM.window.customElements.define('my-card', MyCard);

• 如果是浏览器环境运行，把代码中JSDOM实例相关的引用替换为全局document、customElements即可，类型逻辑完全通用
• 继承HTMLElement的类在写构造函数时，必须在访问this之前调用super()，否则运行时会直接抛出错误
• Shadow DOM的内容是和外部光DOM隔离的，不需要把内部元素重复挂载到组件实例的光DOM下，否则会失去Shadow DOM的样式隔离、DOM封装的效果

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