Question

外部ShadowDOM和内部ShadowDOM之间的CSS空间是分开的。

<style>
    .foo a.bar { text-decoration: none; color: skyblue; }
</style>
<div class="foo">
    <a id="a1" class="bar">baz</a>
    <custom-element>
        (shadow)
            <a id="a2" class="bar">baz</a>
        (/shadow)
    </custom-element>
    <custom-element>
        (shadow)
            <a id="a3" class="bar">baz</a>
        (/shadow)
    </custom-element>
</div>

在上面的代码中，#a1是应用的样式，但#a2和#a3不是。所以，我总是为每个ShadowDOM添加样式元素。样式元素的内容是相同的。

我认为当有很多元素时，它对性能不利。我希望尽可能将CustomElement的默认样式设置为一个元素。

Answer 1

外部ShadowDOM和内部ShadowDOM之间的CSS空间是分开的。

是的！它是Shadow DOM的主要和有趣的特色之一。

所以，我总是为每个ShadowDOM追加样式元素。样式元素的内容是相同的。我认为当有很多元素时，它对性能不利。

您可能只有1000多个自定义元素（并且取决于CPU容量）。

如果你需要应用相同风格的数千次，也许你应该考虑使用没有Shadow DOM的自定义元素。

在同一主题上，请查看此other SO question。

Answer 2

尝试以下代码：

<style>
    .foo a.bar { text-decoration: none; color: skyblue; }
</style>
<div class="foo">
    <a id="a1" class="bar">baz</a>
    <custom-element>
        (shadow)
 <link rel='stylesheet' href='youCsspath.css' >
            <a id="a2" class="bar">baz</a>
        (/shadow)
    </custom-element>
    <custom-element>
        (shadow)
           <link rel='stylesheet' href='youCsspath.css' >
            <a id="a3" class="bar">baz</a>
        (/shadow)
    </custom-element>
</div>

我必须将样式元素追加到所有ShadowDOM吗？

2 个答案: