Shadow Dom继承父页面CSS [Chrome]

Question

我读过的所有内容都表明Shadow Dom从其父页面CSS开始是“安全的”。IE浏览器，如果我将所有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

结果相同。我的影子DOM继承了页面CSS，我的div（奇怪的是我的h1）是紫色的。

似乎Shadow Dom中的子代将继承应用于host元素的任何样式。

这是按设计工作的吗？有办法防止这种情况吗？还是影子DOM足够新，以至于这是一个bug，我应该期待使用它时会遇到类似的bug？

Answer 1

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

从页面分离影子内容，考虑的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>

Answer 2

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

使用* { all: initial }被证明过于宽泛并且覆盖了我在 ShadowDOM 中定义的大部分 CSS。

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