Web组件通过模板克隆的子组件无法访问自定义setter问题

问题成因 #

1. 自定义元素的注册和升级是两个独立流程：import 依赖仅能保证 customElements.define('comp-a', CompA) 的执行顺序早于 CompB 的定义，但已注册的自定义元素不会自动升级所有未插入文档上下文的同标签元素，只有当元素被挂载到关联主文档的DOM树（包括ShadowDOM）时，才会触发升级逻辑，从普通HTMLElement转为自定义类实例。
2. 你的代码中CompB的构造函数执行时机是document.createElement('comp-b')阶段，此时CompB本身还没有被插入到页面主文档，它ShadowRoot里的<comp-a>也未进入可升级的上下文，所以你查询到的s只是未升级的普通元素，自然访问不到CompA定义的set value，仅会给元素挂载一个普通的value属性，这也和你控制台输出的constructor.name为HTMLElement、matches(':defined')返回false的表现完全吻合。

解决方案 #

方案1：将子组件操作逻辑移到connectedCallback（最符合规范） #

Web组件规范明确不推荐在构造函数中操作子DOM，connectedCallback会在组件被插入到文档后触发，此时所有子组件已经完成升级，修改component_b.js如下：

import { CompA } from "./component_a.js"
class CompB extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: "open"});
        this.shadowRoot.append(CompB.template.content.cloneNode(true));
        // 仅保存子组件引用，不操作
        this.subComp = this.shadowRoot.getElementById('subcomponent');
        this._initialized = false;
    }
    connectedCallback() {
        // 避免重复触发
        if (this._initialized) return;
        this._initialized = true;
        console.log(this.subComp.constructor.name);
        console.log(this.subComp.matches(':defined'));
        this.subComp.value = 1;
    }
    set value(x) {
        if (this.subComp) {
            this.subComp.value = x;
        }
        console.log('Value set on CompB');
    }
}
CompB.template = document.createElement("template");
CompB.template.innerHTML = `<div>
  <span>Component B:</span>
  <comp-a id='subcomponent'></comp-a>
</div>`;
customElements.define("comp-b", CompB);
export { CompB };

方案2：主动触发升级 #

如果需要在构造函数中立即操作子组件，可以调用customElements.upgrade主动升级指定根节点下的所有未升级自定义元素：

// 在CompB构造函数插入模板后添加
this.shadowRoot.append(CompB.template.content.cloneNode(true));
// 主动升级ShadowRoot下所有元素
customElements.upgrade(this.shadowRoot);
let s = this.shadowRoot.getElementById('subcomponent');
// 此时s已经是CompA实例，可以正常调用setter

方案3：手动实例化子组件 #

不通过模板声明子组件，直接new自定义类生成实例，跳过升级流程，拿到的直接是完整实例：

// CompB构造函数中
constructor() {
    super();
    this.attachShadow({mode: "open"});
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `<span>Component B:</span>`;
    // 手动实例化CompA
    this.subComp = new CompA();
    this.subComp.id = 'subcomponent';
    wrapper.append(this.subComp);
    this.shadowRoot.append(wrapper);
    // 直接调用setter，不需要等待升级
    this.subComp.value = 1;
}

排查方法 #

1. 用element.matches(':defined')判断目标自定义元素是否完成升级，返回false即为未升级。
2. 打印element.constructor.name，正常升级完成的自定义元素会返回你定义的类名（这里是CompA），如果返回HTMLElement就是未升级。
3. 调用customElements.get('comp-a')，如果返回undefined说明自定义元素还未完成注册，是加载顺序问题；如果返回类定义，说明是升级时机问题。
4. 打断点确认customElements.define('comp-a', CompA)的执行时机是否早于你操作子组件的时机，排除模块加载顺序问题。

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