shadow dom 中 body { color: red } 无效，因样式计算不读取外部样式表，body 非宿主元素也不在作用域内；应使用 css 自定义属性 + inherit 或显式声明实现主题响应。
Shadow DOM 里写 body { color: red } 为什么没用
因为 Shadow DOM 的样式计算完全不读取外部 document 的样式表，body 在 shadowRoot 内部根本不是有效选择器——它既不是宿主元素，也不在当前作用域内。浏览器压根不会把这条规则纳入解析流程，更别说匹配了。
常见误操作包括：在 shadow 内部直接写全局标签选择器、用 !important 强行覆盖、或者试图靠 document.styleSheets 注入规则。这些要么被跳过，要么只影响内联样式，和“穿透”无关。
-
body、header、.app-container这类外部选择器，在 shadow 内部的<style></style>中全部失效 - 即使你在 shadow 里执行
document.querySelector('body')拿到了节点，el.style.color = 'red'也只是加了个内联样式，不等于样式穿透 - Chrome DevTools 里看到的 “inherited from body” 是继承链生效（仅限
color、font等可继承属性），不是规则穿透
如何让外部主题色真正影响 Shadow DOM 内部按钮
不能靠外部 CSS 直接写 button { background: var(--primary) }，那条规则进不了 shadow 样式作用域。唯一可靠路径是用 CSS 自定义属性 + inherit 或显式声明。
实操上分两步：外部定义变量，内部消费变量。注意变量必须在宿主元素或其祖先上设置，才能被 shadow 内部通过 var(--x) 读取到。
- 外部 HTML：
<my-button class="theme-dark"></my-button>，并在或该元素上设style="--primary: #3b82f6;" - shadow 内部样式：
button { background-color: var(--primary, #007bff); } - 如果想让文字颜色也响应主题，别依赖继承中断的属性（如
margin），而是统一用变量：p { color: var(--text-color, #333); } - 避免在 shadow 内部用
:host-context(.dark) button去硬编码主题逻辑——耦合重，维护难；变量方案更松散、更易扩展
::slotted(*) 能不能用来统一控制插槽内容的 margin
不能。这是最容易踩的坑之一。::slotted() 只允许设置可继承属性（color、font、line-height、background-color），对 margin、display、width、position 等布局类属性完全无效。
原因在于 slot 分发的是 light DOM 节点的引用，不是复制节点。样式规则若影响布局，就会破坏封装边界——浏览器明确禁止这种跨边界干预。
- 写
::slotted(*) { margin: 1rem; }不会生效，DevTools 里也看不到该声明被应用 - 如果需要控制插槽内容的外边距，责任应由使用者承担：在传入 slot 的内容上直接加 class 或 style
- 可用
::slotted([slot="header"]) { font-weight: bold; }这类带条件的选择器做轻量样式修饰，但别越界碰布局
用 adoptedStyleSheets 替代 innerHTML += <style></style> 的真实收益
直接拼 innerHTML 插入 <style></style> 标签，样式会被当作文本节点解析，无法进入 CSSOM，后续 JS 动态修改（比如切换主题时替换规则）基本不可行。而 CSSStyleSheet 实例 + adoptedStyleSheets 是规范支持的动态样式管理方式。
它不只是“更现代”，关键是解决了三个实际问题：复用、更新、调试。
- 同一份
CSSStyleSheet可被多个 shadowRoot 共享，减少内存占用和重复解析 - 通过
sheet.replaceSync(cssText)可原子替换整个样式表，避免手动增删insertRule的混乱 - DevTools 的 Styles 面板能清晰显示 adopted sheet 来源，比一堆 innerHTML 拼出来的 style 标签好定位得多
- 注意兼容性：Safari 17.4+、Chrome 73+、Firefox 96+ 支持；旧版本需 fallback 到
appendChild(styleEl)
真正难的不是写对某一条规则，而是守住封装边界的同时，留出可控的通信出口。变量、事件、:host、::slotted 都只是接口形式，背后得有明确的设计契约——比如 “所有主题色由宿主元素上的 --theme-primary 控制”，否则协作时照样踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
