如何在封闭模式下从 ShadowDom 中访问 Shadow Root？答案

【问题标题】：How to access Shadow Root from within the ShadowDom in closed mode?如何在封闭模式下从 ShadowDom 中访问 Shadow Root？
【发布时间】：2020-06-16 12:21:02
【问题描述】：

我在 ShadowDom 之外有一个脚本，它将 shadowRoot 附加到一个元素并填充 Shadow Dom。 shadowRoot 的模式是关闭的。我没有添加

var variable = element.attachShadow({mode:'closed'})

窗口范围的变量，它在一个函数内。

Shadow Dom 中的脚本需要访问同一个 Shadow Dom 的其他元素。有没有办法做到这一点？我试过了，

document.currentScript.parentNode

但是 document.currentScript 返回 null。

【问题讨论】：

标签： javascript html shadow-dom

【解决方案1】：

为什么要将代码存储在 shadowDOM 中？在 shadowDOM 中，代码不像 HTML 和 CSS 那样被沙盒化。它仍然在全球范围内运行。这与 <iframe> 的工作方式不同。

如果您要尝试这种级别的代码隔离，那么只需使用真正的 WebComponent 并在该类中执行所有操作。

如果您仍然需要继续按照您的方式进行操作，那么您需要有一种方法将 variable（shadowRoot 变量）传递到您放置在 shadowDOM 中的代码中。

更新 - 2020 年 8 月 3 日

如果其他代码需要访问封闭的影子 DOM，则创建 shadowRoot 的代码需要将 shadowRoot 保存为变量，然后将该变量传递给其他函数。或者，您需要在 JavaScript 中创建一个封闭范围并将 shadowRoot 存储在该范围中。如果所有其他函数都在该范围内，那么它们将有权访问指向 shadowRoot 的变量。

下面是一些示例代码，展示了如何创建范围。

const publicInterface = (function() {
  var shadowRoot;
  
  function createShadowDom() {
    shadowRoot = ...
  }
  
  function doSomethingElse() {
    let a = shadowRoot.querySelector('.something');
    if (a) {
    }
  }
  
  return {
    createShadowDom,
    doSomethingElse
  }
})();

publicInterface.createShadowDom();
publicInterface.doSomethingElse();

变量shadowRoot 在作用域内受到保护，任何外部代码都无法访问。但作用域内的任何函数，如createShadowDom 和doSomethingElse 都可以访问shadowRoot。

【讨论】：