如何在自定义元素构造函数中添加子元素？无需Shadow DOM与connectedCallback

首先明确：浏览器抛出的这个错误是因为自定义元素规范强制要求构造函数执行完毕后，元素不能包含主DOM树的子节点——直接在构造函数里调用this.appendChild()违反了这条规则。

你不想用Shadow DOM，又顾虑connectedCallback会重复执行，其实可以通过一个简单的实例标记来解决：给元素加一个私有属性标记是否已经完成初始化，在connectedCallback里只执行一次初始化逻辑，后续挂载时跳过即可。

修改后的代码如下：

class ProductItem extends HTMLElement {
    constructor() {
        super();
        // 初始化标记，默认未初始化
        this._isInitialized = false;
    }

    connectedCallback() {
        // 仅在第一次挂载时执行初始化
        if (!this._isInitialized) {
            this.appendChild(template.cloneNode(true));
            this._isInitialized = true;
        }
    }
}

customElements.define('product-item', ProductItem);

const template = document.createElement('article');
template.innerHTML = `
    <a href="#">
        <img />
        <section>
            <div>
                <h4></h4>
                <p class="price"></p>
                <p></p>
            </div>
            <button>Add</button>
        </section>
    </a>
`;

export { ProductItem };

补充说明： #

• 这个方案完全符合自定义元素规范，不会触发任何错误。
• 标记_isInitialized用下划线开头是惯例，表示这是私有属性，避免外部误修改。
• 如果你确实完全不想使用connectedCallback，还有一个不太推荐的变通方法：在构造函数中用requestAnimationFrame延迟添加子元素，但这可能导致元素渲染时出现短暂的空白（因为初始化是异步的），代码示例如下（仅作参考）：

constructor() {
    super();
    requestAnimationFrame(() => {
        this.appendChild(template.cloneNode(true));
    });
}

但相比之下，connectedCallback加标记的方案更可靠，也更符合最佳实践。

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