Shadow DOM 样式隔离

Question

将 Shadow DOM 样式与 Main DOM 样式隔离似乎有些奇怪，请参见下文。

本质上，如果我对 tagName 很具体，那么就会存在隔离，但如果我使用 * 作为 CSS 选择器，那么样式就会流入 Shadow DOM。这里的问题是主 DOM 正在使用一个样式库，它似乎可以做到这一点，我不确定是否还有主 DOM 样式溢出到 Shadow DOM 的其他情况，但这显然是我读过的所有内容关于 Shadow DOM 表明存在完全隔离。

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

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

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

Answer 1

样式继承到影子DOM中。

font-family

是一个继承属性，因此通过该继承应用于影子 DOM 中的测试，而不是因为它作为

*

选择器的主题应用于元素。将此与非遗传性的

rotate

进行对比。

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

h1 { color: red }
* { 
  font-family: sans-serif;
  rotate: 0.5turn;
}

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