Shadow Dom 继承父页面 CSS [Chrome] [重复]

Question

我读过的所有内容都表明，Shadow Dom 从其父页面 CSS 来看应该是“安全的”。 IE。如果我将所有 div 样式设置为紫色字体：

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

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

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

在question 中解决此问题的建议是使用 Shadow Dom。所以我实现了一个解决方案，但注意到它仍然继承了页面的 CSS。我认为这可能是在 Chrome 扩展程序中使用它时出现的问题，所以我从一些 Shadow Dom 示例中劫持了一个 jsBin（并将其扔到另一个实时编码应用程序中以更好地衡量）。

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

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

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

这是否按设计工作？有没有办法防止这种情况？或者影子 DOM 是否足够新以至于这是一个错误，我应该期待在我继续使用它时会出现类似的错误？

Answer 1

继承的属性将照常继承。最好把影子边界看作是影响级联，即选择器的范围和规则的重要性。

要从页面中隔离阴影内容，请考虑the all property。

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 的部分。