Shadow DOM 并非完全免疫全局样式，特别是通配符 * 选择器会穿透边界；需通过 all: initial 显式重置继承链，才能真正实现样式隔离。
shadow dom 并非完全免疫全局样式，特别是通配符 `*` 选择器会穿透边界；需通过 `all: initial` 显式重置继承链，才能真正实现样式隔离。
Shadow DOM 的核心价值之一是样式封装（style encapsulation），但这种封装并非“绝对免疫”——它遵循 CSS 继承与层叠规则，而非简单地屏蔽所有外部样式。关键在于：*Shadow DOM 不阻止样式规则的匹配与应用，而是限制其作用域范围；但某些 CSS 属性（尤其是可继承属性）仍可能通过继承链影响内部元素，尤其当全局样式使用通配符 `` 时。**
在你的示例中：
* { font-family: sans-serif }
该规则匹配所有元素（包括 Shadow DOM 内部的
），因为 * 是一个无上下文限制的选择器，浏览器在计算样式时仍会对 Shadow DOM 中的每个节点执行匹配。虽然 Shadow DOM 阻止了 h1 { color: red } 对内部 生效（因作用域隔离），但 * 规则不受此限制，导致字体被意外继承。
✅ 正确解决方案：在 Shadow Root 中注入重置样式
最可靠、标准兼容的方式是在 Shadow DOM 内部主动切断继承链：
customElements.define('my-test', class extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
// 创建并插入 Shadow 内容
const h1 = document.createElement('h1');
h1.textContent = 'In Shadow DOM';
// 关键：注入样式重置 —— 阻断所有继承，仅保留 UA 默认值
const style = document.createElement('style');
style.textContent = `
:host, :host * {
all: initial;
}
:host *:not(style) {
all: unset; /* 或 initial，视需求而定 */
}
/* 可选：显式恢复必要继承属性（如 direction、unicode-bidi） */
:host {
display: block;
}
`;
shadow.append(style, h1);
}
});
⚠️ 注意事项：
- all: initial 会将所有 CSS 属性重置为初始值（非继承值），适用于根级隔离；
- all: unset 则对继承属性使用继承值，对非继承属性使用初始值，更精细但需谨慎；
- 避免在 connectedCallback 中创建 Shadow DOM：该钩子可能被多次调用（如元素被移动），导致重复挂载；constructor 是唯一且确定的初始化时机；
- mode: 'closed' 对样式隔离无实际帮助，它仅限制 JS 访问 shadowRoot，不影响 CSS 行为；生产环境推荐 open 便于调试；
- 不要依赖 innerHTML 设置
? 进阶建议：
若项目使用现代构建工具（如 Vite、Webpack），可结合 :host 伪类 + CSS 模块化（如 @scope 实验性特性或 ::slotted）进一步强化封装。但对于 * 类全局污染，all: initial 仍是当前最稳定、跨浏览器兼容的兜底方案。
总结：Shadow DOM 提供的是作用域隔离，而非样式免疫。真正的样式隔离需要开发者主动干预——通过重置继承链、合理组织选择器、并在 Shadow Root 内部声明“防御性样式”，才能确保组件视觉表现的确定性与可维护性。
