Shadow DOM样式隔离异常：通配符样式渗透至Shadow DOM问题咨询

在实现Shadow DOM样式与主DOM样式隔离时发现异常：使用具体标签名作为CSS选择器时，样式隔离功能正常；但使用*通配符选择器时，主DOM的样式会渗透进Shadow DOM中。目前主DOM所使用的样式库存在该情况，此前认为Shadow DOM应具备完全样式隔离性，现咨询：

1. 是否存在其他主DOM样式渗透至Shadow DOM的场景？
2. 该问题的解决方向是什么？

代码示例 #

JavaScript #

class myTest extends HTMLElement {
    constructor () {
        super(); 
    }

    connectedCallback () {
        const shadow = this.attachShadow({ mode: 'closed' });
        const h1 = document.createElement('h1')
              h1.innerHTML = 'In Shadow DOM'
              shadow.appendChild(h1)
    }
   
}

customElements.define('my-test', myTest);

CSS #

h1 { color: red }
* { 
  font-family: sans-serif
}

HTML #

<h1>In main DOM</h1>
<my-test></my-test>

为什么*通配符会渗透Shadow DOM #

Shadow DOM的样式隔离并非绝对，浏览器对*通配符的处理是规范允许的特殊情况：*代表所有元素，Shadow DOM内的元素本质上属于全局DOM树的一部分，因此全局*选择器会匹配到这些元素，导致样式渗透。

其他主DOM样式渗透Shadow DOM的场景 #

• CSS继承属性：color、font-family、line-height等继承类属性，主DOM的全局样式会通过CSS继承机制进入Shadow DOM，除非内部显式覆盖。
• 全局CSS变量：主DOM定义的:root级自定义属性（如--text-color），会被Shadow DOM内部未重新定义该变量的元素直接使用。
• ::slotted()选择器：主DOM可通过该选择器控制Shadow DOM插槽（slot）内元素的样式。
• 带!important的全局样式：优先级极高，可能覆盖Shadow DOM内部的普通样式（除非内部也使用!important）。
• 浏览器用户代理样式：默认的UA样式（如body的margin、p的默认间距）也会影响Shadow DOM内部元素。

解决方法 #

针对*通配符问题 #

1. Shadow DOM内部重置样式：在Shadow DOM的<style>中显式覆盖*选择器的属性，阻断外部渗透：

/* Shadow DOM内部样式 */
* {
  font-family: inherit; /* 或指定你需要的字体 */
  /* 其他需要重置的属性 */
}

2. 修改第三方样式库：将库中的*选择器替换为具体标签选择器，或限定作用域（如仅作用于主DOM的容器）。

通用隔离强化方案 #

• 显式阻断继承：在Shadow DOM的:host选择器中设置继承属性的默认值，切断主DOM的继承链：

:host {
  color: #000;
  font-family: serif;
  line-height: 1.5;
}

• 隔离CSS变量：在Shadow DOM内部重新定义所需的自定义属性，避免使用主DOM的全局变量：

:host {
  --text-color: #333;
}

• 使用all: initial重置：在Shadow DOM的根容器上使用all: initial，彻底重置所有样式为初始值，再重新定义内部样式：

.shadow-inner-container {
  all: initial;
}

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