为何通过append添加template克隆的WebComponent无法调用自定义方法？

核心问题：自定义元素的升级时机差异 #

示例1报错的根本原因是自定义元素的升级逻辑和<template>的惰性特性不匹配：

1. <template>的内容是惰性解析的，克隆出来的节点不会自动触发自定义元素升级，只有当节点被插入到已接入文档树的DOM容器中时，才会触发自动升级。
2. 你在ComponentA的构造函数中操作子元素时，ComponentA实例本身还没有被append到document.body，属于离线DOM节点，它的shadowRoot也未接入文档树，因此里面的<component-b>不会自动升级，你拿到的只是未升级的普通HTMLElement实例，自然不存在hello方法，instanceof判断也返回false。

三个示例的差异说明 #

• 示例2正常是因为<component-a>直接写在HTML中，自定义元素注册完成后升级时，<component-a>已经处于文档树中，插入到它shadowRoot里的<component-b>会立刻触发自动升级，因此能正常访问自定义方法。
• 示例3正常是因为innerHTML赋值操作会同步解析内容，对其中已经完成注册的自定义元素直接执行升级，不需要等待元素接入文档树，和<template>克隆的惰性逻辑有本质区别。

要保留<template> + cloneNode的使用方式，有两种成熟的方案：

方案1：将子元素访问逻辑移到connectedCallback生命周期 #

自定义元素的connectedCallback会在元素被插入到文档树时触发，此时内部的子自定义元素已经完成自动升级：

class ComponentA extends HTMLElement {
  #isInit = false;
  constructor() {
    super();
    this.attachShadow({mode: "open"});
    this.shadowRoot.append(templateA.content.cloneNode(true));
  }

  connectedCallback() {
    // 防止元素多次插拔时重复执行初始化逻辑
    if (this.#isInit) return;
    this.#isInit = true;
    this.componentB = this.shadowRoot.querySelector('component-b');
    console.log(this.componentB instanceof ComponentB); // 输出 true
    this.componentB.hello(); // 正常输出 Hello
  }
}

方案2：显式调用customElements.upgrade强制升级 #

如果需要在构造函数中直接访问子元素，可以在插入克隆内容后，强制升级shadowRoot下所有已注册的自定义元素：

class ComponentA extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: "open"});
    this.shadowRoot.append(templateA.content.cloneNode(true));
    // 强制升级shadowRoot内所有已注册的自定义元素
    customElements.upgrade(this.shadowRoot);
    this.componentB = this.shadowRoot.querySelector('component-b');
    console.log(this.componentB instanceof ComponentB); // 输出 true
    this.componentB.hello(); // 正常输出 Hello
  }
}

内容的提问来源于stack exchange，提问作者Krzysztof Kaczyński