javascript - 我如何从影子dom内获取ElementElementById

每当我尝试在影子dom脚本标记中使用document.getElementById时，总是得到null
我查看了问题here和here，但没有一个答案有帮助。

现在我正在使用此脚本，但是我很确定有更好的方法来执行此操作。

window.document.body.getElementsByClassName('calculator')[0].getElementsByClassName('content')[0].shadowRoot.getElementById('test')

最佳答案

这就是在影子DOM中使用选择器的方式。您必须先找到shadowRoot，然后从中调用getElementById。

class ElementWithShadowRoot extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({
            mode: 'open'
        }).innerHTML = '<div><div id="some-div">Hi I\'m somewhere inside a shadow DOM!</div></div>';
    }
}

customElements.define("element-with-shadowroot", ElementWithShadowRoot);

console.log(document.getElementById('some-div'));

console.log(document.getElementsByTagName('element-with-shadowroot')[0].shadowRoot.getElementById('some-div'));

<element-with-shadowroot></element-with-shadowroot>