shadow DOM 像 Iframe 一样封装 javascript

Question

我试图弄清楚在 Shadow DOM 中执行的 Javascript 是否可以限定作用域（就像 iframe 标签的 sandbox 属性所做的那样）。我不希望加载的 Javascript 与页面内容的其余部分混淆，或者事件可以访问

window.open

等属性，最终可能会在各处打开选项卡。

如果有人有这样做的过程示例，那将会有很大帮助。 谢谢，

Answer 1

根据我在使用影子 DOM 元素并尝试通过 JS 的执行和应用样式来完全封装它时所得到的信息如下：

这是一个非常巧妙的技术。样式封装效果非常好。我想到了关于 Javascript 封装的一件大胆的事情。我的场景包含以下策略：

• 我正在创建一个 DOM 元素，并将其添加到影子 DOM 中
• 通过

  customElements.define()

   中的 

  customElements API.
创建自定义元素
• 将自定义元素附加到阴影元素
• 创建脚本标签和src，指向外部CDN
• 创建样式链接
• 附加样式和脚本

以上所有操作都是通过编程完成的。该场景旨在像现代方法一样在影子 DOM 元素内运行 Angular 应用程序，而不是使用 90 年代的 iframe。首先，我使用主项目框架创建了一个干净的引导应用程序。在这种情况下，奥蕾莉亚.然后，我开设了一堂课，执行上面列表中的步骤。除了一些风格问题之外，一切都按照记录进行，但这是因为范围差异，这很好。然而，当我转向实际项目时，事情变得更加复杂（有路由器策略、会话等）。我注意到附加的影子 DOM 中的 JS（尤其是包含 zone.js 的 polyfil）与 Aurelia 导航路由器和其他区域混淆。它正在发生，所以显然，我来自影子 DOM 的脚本正在破坏容器 Web 应用程序，这对我来说是一个巨大的失败和失望。