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>
`;

shadow DOM中的div应该有黑色文本，但它有红色文本。我做错了吗？

Answer 1

为什么会这样？

Light DOM中的CSS选择器无法到达shadow DOM内的元素。但是当CSS属性的值为color时，默认值为initial，影子DOM仍将继承轻型DOM中的那些。

From the CSS Scoping specification

3.3.2继承
阴影树的顶级元素继承自其宿主元素。通讯组列表中的元素继承自最终分发给它们的内容元素的父元素，而不是从它们的普通父元素继承。

如何防止它发生？

您可以使用color值来阻止继承属性表单的值。

From the CSS Cascading and Inheritance specification

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

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

您可以将initial分配给您不想继承其值的每个媒体资源。或者您可以将.selector { all: initial; }的值设置为all，如下所示：

initial

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

<强> 3.1。重置所有属性：全部属性
all属性是一种速记，可以重置除direction和unicode-bidi之外的所有CSS属性。它只接受CSS范围的关键字。

“CSS范围内的关键字”在第3.1.1节的CSS Color specification中定义，但归结为值unset，{{1}}和{{1}}。

轻型DOM风格泄漏到Shadow DOM中

1 个答案:

为什么会这样？

如何防止它发生？