Shadow Dom继承父页面CSS[Chrome]

Question

我所读到的所有内容都表明Shadow Dom应该与其父页面CSS"安全"。I.E.如果我把所有的div都设计成紫色字体：

<style>
div{color: purple}
</style>

我的Shadow Dom中的div应该具有浏览器默认颜色。

我正在编写一个chrome扩展，它将html注入任何给定的页面。除非这个html受到Shadow Dom或Iframe的保护，否则它将继承页面的所有CSS。

解决这个问题的建议是使用阴影圆顶。所以我实现了一个解决方案，但注意到它仍然继承了页面的CSS。我认为这可能是在Chrome扩展中使用它的问题，所以我从一些Shadow Dom示例中劫持了一个jsBin(并将其放入另一个实时编码应用程序中)。

https://codepen.io/hyrumwhite/pen/xPRexQ

同样的结果。我的shadow DOM继承了页面CSS，我的div(奇怪的是我的h1)是紫色的。

看起来Shadow Dom中的子元素将继承应用于主体元素的任何样式。

这是按设计工作的吗？有办法防止这种情况发生吗？或者shadow DOM是否足够新，以至于这是一个错误，并且在我继续使用它时，我应该期待类似的错误？

Answer 1

对我来说，添加:host { all: initial }作为ShadowDOM样式中的第一个CSS规则可以防止继承，而不会影响ShadowDOM中定义的其他CSS。

事实证明，使用* { all: initial }过于宽泛，并且覆盖了我在ShadowDOM中定义的大多数CSS。

参考：WebFundamentals项目ShadowDOM文档中标记为#reset的部分。

Answer 2

继承的属性将照常继承。最好将阴影边界视为影响级联，即选择器的范围和规则的重要性。

若要将阴影内容与页面隔离，请考虑all属性。

document.getElementById("example_control").attachShadow({mode:'open'}).innerHTML=`
<h1>shadow dom header</h1>
<div>shadow dom div</div>`;
document.getElementById("example_initial").attachShadow({mode:'open'}).innerHTML=`
<style>*{all:initial}</style>
<h1>shadow dom header</h1>
<div>shadow dom div</div>`;
document.getElementById("example_unset").attachShadow({mode:'open'}).innerHTML=`
<style>*{all:unset}</style>
<h1>shadow dom header</h1>
<div>shadow dom div</div>`;

div{color:purple}
div{border:1px solid}

<p>control:
<div id=example_control></div>
<p>initial:
<div id=example_initial></div>
<p>unset
<div id=example_unset></div>