Web Component Shadow Root CSS泄漏至文档问题求助

原本认为Web Component可以防止组件内的CSS泄漏到父级文档，但实际组件内的样式却影响了整个文档。预期只有test-shadow-dom组件内的内容会变为斜体，但实际整个网页的内容都变成了斜体。

相关代码 #

HTML模板 #

<template id="test-shadow-dom-template">
    <slot name="menu-bar"></slot>
    <span id="contents">
        <slot>The content</slot>
    </span>
</template>

JS代码 #

<script type="text/javascript">
    if(!customElements.get('test-shadow-dom')) {
        customElements.define('test-shadow-dom', class extends HTMLElement {
            constructor() {
                super();

                let template = document.getElementById("test-shadow-dom-template");
                let templateContent = template.content;

                const shadowRoot = this.attachShadow({mode: 'open'});
                shadowRoot.appendChild(templateContent.cloneNode(true));
            }
        });
    }
</script>

使用代码 #

<div id="test-shadow-dom-container" class="box" style="height: 100%">
    <test-shadow-dom id="my-id">
        <style>
            * {
                font-style: italic;
            }
        </style>
        <h1>Here is the actual contents...</h1>
    </test-shadow-dom>
</div>

原因 #

你将<style>标签放在了Web Component的**外部子内容（slot填充内容）**中，而非Shadow DOM内部。这类<style>属于主DOM树的一部分，不在Shadow DOM的隔离范围内，因此会全局生效。

Shadow DOM的样式隔离仅针对其内部定义的样式，通过slot传入的内容（即<test-shadow-dom>标签内部的内容）本质上仍属于主文档DOM，只是被渲染到Shadow DOM的slot位置，它的样式默认会影响主文档，同时也会受主文档样式影响。

解决方法 #

方法1：将样式移到Shadow DOM模板内部 #

把<style>标签放入组件的模板中，样式会被限制在Shadow DOM范围内：

<template id="test-shadow-dom-template">
    <style>
        * {
            font-style: italic;
        }
    </style>
    <slot name="menu-bar"></slot>
    <span id="contents">
        <slot>The content</slot>
    </span>
</template>

方法2：使用:slotted()选择器针对slot内容设置样式 #

如果需要仅对slot传入的内容生效，可在Shadow DOM的样式中使用:slotted()选择器，同时移除外部的<style>标签：

<template id="test-shadow-dom-template">
    <style>
        /* 对slot内的所有直接子元素生效 */
        :slotted(*) {
            font-style: italic;
        }
        /* 或指定具体元素，比如仅作用于slot内的h1 */
        :slotted(h1) {
            font-style: italic;
        }
    </style>
    <slot name="menu-bar"></slot>
    <span id="contents">
        <slot>The content</slot>
    </span>
</template>

内容的提问来源于stack exchange，提问作者rdehuyss