在构造函数中将子元素附加到自定义 Web 组件

Question

我在JS中定义了一个自定义元素。我想在它的构造函数中初始化它，例如附加一个模板元素作为它的子元素。但如您所知，浏览器会抛出一个错误：

无法构造“CustomElement”：结果不能有子元素

这意味着我无法将任何子元素附加到其构造函数中的自定义元素。

我知道如果我创建一个shadow DOM，然后向其附加元素，就可以解决这个问题，但我不想在应用程序的每个部分都使用shadow DOM；另一种选择是在

connectedCallback

方法中将元素附加到自定义元素，而每次自定义元素安装到 DOM 时都会调用它，我认为实际上这并不是那么酷。在不使用 Shadow DOM 和

connectedCallback

方法的情况下如何解决这个问题？谢谢

自定义组件：

class ProductItem extends HTMLElement {
    constructor() {
        super()

        this.appendChild(template.cloneNode(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 }

Answer 1

您无法在构造函数中追加，因为该元素尚未在 DOM 中。
当您使用

.createElement("my-element")

时也会发生同样的情况

所以使用connectedCallback

使用

isConnected

属性：
https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected

和/或你自己的布尔值来检查（在connectedCallback中）你的附加是否已经运行。

在 Vanilla JS 中，没有其他方法像 Lit/Stencil/任何工具那样只运行一次