shadow dom中body、header等外部选择器无效，因浏览器解析时根本不将其纳入匹配流程，既非宿主元素也不在当前作用域内；css变量能生效是因继承机制天然跨boundary，但必须定义在宿主或其直系祖先上。
Shadow DOM里写body或header选择器为什么无效
因为浏览器在解析 Shadow DOM 内部的 <style></style> 时，根本不会把 body、header、.app-container 这类外部选择器纳入匹配流程——它们既不是宿主元素，也不在当前 shadow tree 的作用域内。规则直接被跳过，连计算权重的机会都没有。
常见误操作包括：
- 在 shadow 内部
<style></style>中写button { color: red }试图覆盖外部按钮样式（实际只影响自己内部的<button></button>） - 用
!important强行加权（无效，跨 boundary 不参与同一 CSSOM） - 往
document.head动态插入<style></style>（污染全局，违背封装）
var(--x) 能生效，但变量必须挂在宿主上
CSS 变量能“透入” Shadow DOM 不是因为穿透，而是继承查找机制天然跨 boundary 向上追溯。但前提是：变量必须定义在宿主元素自身或其直系祖先上。
✅ 正确做法：
<my-button style="--primary: #3b82f6;"></my-button>-
<my-button class="theme-dark"></my-button>+.theme-dark { --primary: #1e1e1e; }
❌ 常见错误：
-
<div class="wrapper"><my-button></my-button></div>+.wrapper { --primary: red; }（变量没挂到 host，var(--primary)只能回退 fallback） - 在 shadow 内部写
:host { --primary: blue; }然后期望外部消费——:host只影响宿主自身样式，不向外暴露
::slotted(*) 只能设可继承属性，别碰 margin 和 display
::slotted() 是唯一能影响 slot 分发内容的伪类，但它被浏览器严格限制：仅允许设置 color、font、line-height、background-color 等可继承属性。布局类属性一律被忽略。
例如：
-
::slotted(*) { margin: 16px; }—— 完全无效，DevTools 里都看不到这条声明被应用 -
::slotted(p) { color: var(--text-color); }—— 有效，但只作用于传入 slot 的顶层<p></p>元素
根本原因：slot 分发的是 light DOM 节点的引用，不是副本；若允许修改布局，就等于打破封装边界，浏览器明确禁止。
想彻底阻断继承？用 all: initial 重置所有属性
如果组件需要完全脱离主文档的字体、颜色、行高影响，最可靠的方式是在 shadow 内部注入重置样式：
const style = document.createElement('style');
style.textContent = `*:not(style) { all: initial; }`;
shadowRoot.appendChild(style);
注意两点：
-
all: initial会把除direction和unicode-bidi外所有 CSS 属性重置为规范初始值（比如font-family: initial→ 浏览器默认字体） -
:not(style)是为了防止<style></style>标签自身被重置，属于必要防护
这招对微前端或第三方组件嵌入场景特别关键——否则用户代理样式（如 a 默认蓝色）和继承链会悄悄干扰渲染结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
