Must I append style element to all ShadowDOM?

问题

CSS space between outer ShadowDOM and inner ShadowDOM is separated.

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

In above code, #a1 is applied style, but #a2 and #a3 are not. So, I always append style element for each ShadowDOM. The content of style elements is same.

I think that it is not good for performance when there are many elements. I want to set default style of a CustomElement by one element if possible.

回答1:

CSS space between outer ShadowDOM and inner ShadowDOM is separated.

Yes ! it's one of the main and interesting featues od Shadow DOM.

So, I always append style element for each ShadowDOM. The content of style elements is same. I think that it is not good for performance when there are many elements.

You're probably right only from 1000's of custom elements (and depending on the CPU capacity).

If you need to apply thousands of times the same style, maybe you should consider using Custom Elements without Shadow DOM.

On the same subject, look at this other SO question.

回答2:

Try the following code:

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

来源：https://stackoverflow.com/questions/49904618/must-i-append-style-element-to-all-shadowdom

标签

javascript

shadow-dom