从 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

你只需要调用Shadow Root 。

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

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

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

Answer 2

如果目标应为ID，则

document.getElementById(target)

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

document.querySelector(target)

不正确，正确的版本是

document.querySelector("#" + target)

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

Answer 3

据我所知，shadow DOM 有两个用例：

1. 您仅通过托管自定义元素来控制 shadow DOM（如@Penny Liu 的回答）。 如果您想确保没有其他脚本应该调用和更改节点，这是您的选择。 很确定一些银行网站使用这种方法。 但是你放弃了灵活性。

2. 出于样式原因，您只想限制代码的某些部分，但您喜欢通过 document.getElementById来控制它，而不是使用<slot> 。 毕竟，许多库依赖于文档对象，在影子 DOM 中不起作用。

回到问题，你可能做的是这样的：

shadowRoot.innerHTML = `...<script>document.getElementById('target')</script>`
// or shadowRoot.appendChild

这是行不通的！ 这也不是 shadow DOM 预期的工作方式。

回顾方法 2 ，你应该只用<slot>标签填充你的 shadow DOM。 最简单的例子：

<!-- Custom Element -->
<scoped-playground>
  <style>some scoped styling</style>
  <div id="target"></div>
  <script>const ☝☝☝☝ = document.getElementById('target')</script>
</scoped-playground>

<!-- Scoped playground has a shadowRoot with a default <slot> -->
...
this.shadowRoot.innerHTML = "<slot>Everything is rendered here</slot>";
...

可以在以下位置找到更高级的<slot>示例：
https://developers.google.com/web/fundamentals/web-components/shadowdom#composition_slot