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

Question

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

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

但是动态内容可以定义自己的CSS，我不想将其应用于全局范围。因此，我不能在某些分区上将其设置为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>

现在，有了影子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，如果你把它放在一个自定义元素类中，它就不会泄漏到其他地方。