Javascript Web 组件：this.shadowRoot.querySelector() 总是 returns 空

Question

我正在使用 vanilla JavaScript 制作一个网络组件，如下所示：

<template id="TEMPLATE_UPLOADER">
<div>Try Query Me</div>
</template>

<script>
customElements.define('my-uploader', class extends HTMLElement {

    constructor() {
        const template = document.getElementById("TEMPLATE_UPLOADER");
        const content = template.content;
        let superThis = super()  // Create and binds the this keyword
        let shadowRoot = superThis.attachShadow({mode: "open"});
        shadowRoot.appendChild(template.cloneNode(content, true));
    }

    /** Custom Component Reactions **/
    connectedCallback() {
        setTimeout(this.init.bind(this), 1000)
    }
   
    init() {
        const el = this.shadowRoot.querySelector('div');
        console.log('I hope el is not null:', el)
    }
});
</script>
<my-uploader></my-uploader>

现在 init() 我想查询此组件模板中的一些元素。但是 this.shadowRoot.querySelector 总是 returns null。我知道元素在 connectedCallback 时间还没有创建，所以我设置了一个超时来在 1 秒后调用 init() 以确保它已经完成创建，但得到了相同的结果。这就是 this.shadowRoot 在 Chrome 中的样子（旁注 this 是 <my-uploader></my-uploader>）：

如您所见，里面有divs，但是this.shadowRoot.querySelector('div') returns 为空。如何在 Web 组件中查询项目？

Answer 1

template.cloneNode(content, true)

应该是：template.cloneNode(true)

您的 content 是一个 DOM 引用解释为 FALSE，因此您创建了一个 SHALLOW 副本，没有 <div>

我压缩了你的代码

<template id="TEMPLATE_UPLOADER">
  <div>Try Query Me</div>
</template>

<script>
customElements.define('my-uploader', class extends HTMLElement {

    constructor() {
        const template = document.getElementById("TEMPLATE_UPLOADER").content;
        super()
           .attachShadow({mode: "open"})
           .append(template.cloneNode(true));
    }

    connectedCallback() {
        setTimeout( () => this.init() ); // don't learn JRs that oldskool bind stuff
    }
   
    init() {
        const el = this.shadowRoot.querySelector('div');
        console.log('I hope el is not null:', el)
    }
});
</script>
<my-uploader></my-uploader>

Javascript Web 组件：this.shadowRoot.querySelector() 总是 returns 空

Javascript Web Component: this.shadowRoot.querySelector() always returns null

javascript

web-component