反向阴影 dom，防止 css 和 js 从子树泄漏到文档

Question

我想在我的页面中包含动态 HTML 内容。 这只是 HTML 和 CSS，没有 Javascript。

我有一些全局 CSS 样式和自定义 JS 逻辑需要应用于此动态内容。 这意味着我不能简单地将它封装在 iframe 中。 它应该和其他所有东西都在同一个 DOM 中。

但是动态内容可以定义自己的CSS，我不想应用到全局范围。 因此，我不能在某些 div 上将其设置为 innerHTML。

这是一个简单的例子，它将它设置为innerHTML并污染全局CSS（ jsfiddle ）：

<!--this style needs to be global-->
<style>p {font-size:24px;}</style>
<p>Welcome, please take a look at this dynamic content:</p>

<!--custom elements need to be added here-->
<div id='placeholder'></div>


<script>
// the style in here must not be global
const dynamic=`
<p>dynamic html with fancy style :)</p>
<style>p {color:blue;}</style>
`
$("#placeholder").html(dynamic)
</script>

现在，使用shadow dom 解决了类似的问题：

例如，Shadow DOM 允许您将子项放置在作用域子树中，因此文档级 CSS 不会意外地重新设置按钮的样式。

我正在寻找的是类似于反向阴影 DOM 的东西。 我不想屏蔽全局样式的本地子树，而是屏蔽本地子树的全局样式。 那可能吗？ 一个重要的限制是自定义 javascript 逻辑也驻留在全局范围内。 jQuery 应该可以访问动态 HTML，就像其他元素一样。

Answer 1

Shadow DOM CSS 隔离有两种方式。 因此，使用这种技术，您可以“从本地子树中屏蔽全局样式”：

 // the style in here must not be global const dynamic=` <p>dynamic html with fancy style :)</p> <style>p {color:blue;}</style> ` placeholder.attachShadow( { mode: 'open' } ) .innerHTML = dynamic

 /*this style needs to be global*/ p {font-size:24px;}

 <p>Welcome, please take a look at this dynamic content:</p> <!--custom elements need to be added here--> <div id='placeholder'></div>

关于 JS，如果你把它放在自定义元素类中，它不会泄漏到其他任何地方。