必须将样式元素附加到所有ShadowDOM中吗？

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空间分离。

是的！这是一个主要和有趣的特点阴影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>