我必须将样式元素附加到所有 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 空间是分开的。

是的！这是 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>