影子 DOM 中的 GetElementById答案

【问题标题】：GetElementById from within Shadow DOM影子 DOM 中的 GetElementById
【发布时间】：2019-08-01 18:34:00
【问题描述】：

我有一个带有影子 DOM 的自定义元素，它监听属性 target 的变化。
target 应该是我的组件应该附加到的元素的 ID。

我尝试使用querySelector 和getElementById 来获取外部DOM 的元素，但它总是返回null。

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

以上都返回null。

有没有办法从 shadow DOM 中获取对父文档中元素的引用？

【问题讨论】：

显示完整的事件代码？
好吧，问题不同了，我的组件在另一个带有 shadowDOM 的 web 组件中，这就是为什么 querySelector 和 getElementById 都不起作用的原因。
target引用的元素是在DOM中还是在别人的shadowDOM中？ document.getElementBuId 不会遍历 shadowDOM，因此无法在 shadowDOM 中找到元素。如果该元素在 your shadowDOM 中，那么您将使用 this.shadowRoot.getElementById(target)。您能否在问题中提供更多示例，以便我们查看物品的位置？
@Intervalia 这两个影子 DOM 都是“我的”。由于我正在寻找的元素也在 shadow dom 中（不管是哪一个），所以没有找到。
如果您想在其 ShadowDOM 之外（上方）找到自定义元素的 parentNode（就像 .closest( ) 在文档 DOM 中所做的那样），您可以向上遍历 DOM 树（跨越 shadowDOM 边界）使用此代码：stackoverflow.com/questions/54520554/…

标签： javascript web-config shadow-dom

【解决方案1】：

您只需致电 ShadowRoot。

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

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

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

【讨论】：

【解决方案2】：

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

您仅通过托管自定义元素来控制影子 DOM（就像@Penny Liu 的回答一样）。如果您想确保没有其他脚本应该调用和更改节点，那么这是您的选择。很确定一些银行网站使用这种方法。但是你放弃了灵活性。
出于样式原因，您只想限制代码的某些部分，但您希望通过 document.getElementById 控制它而不是您可以使用<slot>。毕竟，许多库依赖于 document 对象，在 shadow 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

【讨论】：