来自Shadow DOM内的GetElementById

Question

我有一个带有shadow DOM的自定义元素，它侦听属性target更改。 target应该是我的组件应该附加到的元素的ID。 我尝试使用querySelector和getElementById来获取外部DOM的元素，但它总是返回null。例如。：

console.log(document.getElementById(target));
console.log(document.querySelector('#' + target));

以上两者都返回null。 有没有办法从shadow DOM中引用父文档中的元素？

Answer 1

如果target应该是id，那么

document.getElementById(target)

是通过id获取元素的正确代码。其他代码，

document.querySelector(target)

是不正确的，正确的版本将是

document.querySelector("#" + target)

你得到null作为第一个结果的事实意味着document中没有你指定的id的标签。它可能已被更改/删除（如果它曾经存在），或者您可能想要达到另一个页面标记的ID。

Answer 2

你只需要打电话给Shadow​Root。

this.shadowRoot.getElementById('target')应该工作。

这是一个例子，get语法将对象属性绑定到一个函数。

get target() {
    return this.shadowRoot.getElementById('target');
}