一个HTML页面中2个Shadow DOM

Question

我想在一个Angular应用程序中创建/注入/设置两个Shadow DOM，每个CSS和js都如此。

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

对于js来说，我的变量和函数名都发生冲突。

有什么主意吗？

index.html：

index2.html

1. 我进行HTTP请求以获取HTML文件（带有CSS和js）。
2. 每个都创建一个影子dow
3. 将文件追加到影子dom
4. 我收到此错误

错误：

Answer 1

ShadowDOM为DOM和CSS创建一个沙箱，但没有为代码创建沙箱。

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

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

• 如果只能在较新的浏览器上运行，请使用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

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