轻型DOM样式泄漏到阴影DOM中

Question

我正在尝试使用浮动小部件创建一个Chrome扩展程序。为此，我必须将我的元素与页面的其余部分隔离。Shadow DOM看起来很适合此操作，但是它没有达到我的预期。

这是我的内容脚本：

content.js

var lightDom = document.createElement('style');
lightDom.innerText = 'div { color: red }';

document.body.appendChild(lightDom);

var shadowDom = document.createElement('div');

document.body.appendChild(shadowDom);

var shadowRoot = shadowDom.attachShadow({'mode': 'open'});

shadowRoot.innerHTML = `
    <style>
        div {
            background-color: blue;
        }
    </style>
    <div>Shadow!</div>
`;

阴影DOM内的div应该有黑色文本，但是有红色文本。难道我做错了什么？

Answer 1

为什么会这样？

Light DOM 中的 CSS 选择器被阻止访问 shadow DOM 中的元素。但是当一个 CSS 属性的值为 时inherit，它是 的默认值color，影子 DOM 仍然会继承光 DOM 的那些。

来自 CSS 范围规范

3.3.2 继承
shadow 树的顶层元素继承自它们的宿主元素。分发列表中的元素从它们最终分发到的内容元素的父元素继承，而不是从它们的正常父元素继承。

如何防止它发生？

您可以通过使用initial值来防止属性表单的值被继承。

来自 CSS Cascading and Inheritance 规范

7.3.1. 重置属性：初始关键字
如果级联值是初始关键字，则属性的初始值将成为其指定值。

每个属性的初始值都记录在定义它的规范color中。CSS 颜色规范中记录了它的初始值depends on user agent，对于大多数用户代理，这将是black。

您可以分配initial给您不想继承其值的每个属性。或者您可以将值设置为allto initial，如下所示：

.selector 
{
    all: initial;
}

该all属性在与初始关键字相同的规范中定义如下。

3.1. 重置所有属性：all 属性
all 属性是一种简写，用于重置除方向和 unicode-bidi 之外的所有 CSS 属性。它只接受 CSS 范围内的关键字。

“CSS 范围的关键字”在第 3.1.1 节的CSS 3 值规范中定义，但归结为值initial,inherit和unset。