一个 HTML 页面中的 2 个 Shadow DOM

Question

我想在一个 Angular 应用中创建/注入/设置两个 Shadow DOM，每个应用同时包含 CSS 和 js。

对于 CSS - 我知道如何隔离它。

对于 js - 我与变量和函数名称发生冲突。

有什么想法吗？

index.html：

index2.html

1. 我创建 HTTP 请求是为了获取 HTML 文件（使用 CSS 和 js）。
2. 为每个创建一个阴影线
3. 将文件附加到影子 dom
4. 我收到此错误

错误：

Answer 1

ShadowDOM 为 DOM 和 CSS 创建沙箱，但不为代码创建沙箱。

JS 代码，无论是使用<script src="filename"></script> 还是<script>code</script> 加载，都被放置在单个命名空间中。

如果您需要防止代码踩到其他代码，请尝试以下操作：

• 如果您只能在较新的浏览器上运行，请使用 ES6 模块。 <script src="filename" type="module"></script>https://hacks.mozilla.org/2015/08/es6-in-depth-modules/

• 将代码放入 IIFE：

(function () {
  // your code
})()

这会加载函数并创建一个新作用域，将所有代码都放在该作用域中。

• 使用类https://devdocs.io/javascript/classes

这允许您创建封装在可重用的类中的代码块。