css变量能进shadow dom是因为继承机制天然穿透影子边界，而外部class选择器在样式计算阶段即被边界截断；变量必须挂载在宿主元素上，消费时需在所有用色、用距、字体等位置显式写var()并带fallback，:host是唯一可靠注入点，innerhtml注入会导致样式不进cssom而失效。
为什么CSS变量能进Shadow DOM，但外部class不能
因为CSS变量（如--theme-primary）靠继承透入，而普通选择器（如.theme-dark button）在样式计算阶段就被Shadow DOM边界截断。浏览器压根不把这条规则纳入shadow tree的匹配流程，!important也无效。变量必须挂载在宿主元素自身或其可访问祖先上，比如<my-button class="theme-dark"></my-button>配合.theme-dark { --theme-primary: #1e40af; }，否则var(--theme-primary)会 fallback 或解析为inherit。
如何在Shadow DOM里安全消费主题变量
所有用色、用距、用字体的地方，都得显式写var()，不能靠继承自动带入。常见错误是只给button设背景色，却忘了::before的fill或slot内容的color。
-
:host是唯一能读取宿主上变量的位置，推荐在这里定义组件级变量：:host { --btn-bg: var(--theme-primary, #3b82f6); --btn-text: var(--theme-bg, #ffffff); } - 内部元素直接引用这些中间变量，而非重复写
var(--theme-primary)，方便统一控制 - 伪元素和内联SVG必须单独声明：
svg { fill: var(--btn-bg); }，否则主题切换时图标颜色卡死 - 务必带fallback值，避免变量未定义导致样式崩溃：
background-color: var(--btn-bg, #007bff);
为什么innerHTML = '<style>...</style>'会导致主题失效
这种写法会让<style></style>标签被当普通HTML解析，不进入CSSOM，后续JS改style.textContent完全无效，甚至触发FOUC。主题切换时样式不会更新。
- 正确做法是分两步：先设结构（
shadowRoot.innerHTML = '<button><slot></slot></button>'），再用DOM方法注入样式 - 始终用
document.createElement('style')+textContent+appendChild() - 不要拼接用户输入到
textContent中，避免XSS；变量值应来自宿主属性或class，而非字符串插值 - 若需复用基础样式（如重置字体、行高），可用
CSSStyleSheet实例配合adoptedStyleSheets，但注意Safari 16.4+、Chrome 73+才稳定支持
::slotted()能穿透主题吗？能设margin吗？
::slotted()只对传入<slot></slot>的顶层元素生效，且仅支持可继承属性。它不是“穿透”，而是有限透传通道。
- 允许：
::slotted(p) { color: var(--text-color); font-family: inherit; } - 禁止：
::slotted(*) { margin: 16px; }——margin不可继承，浏览器直接忽略 - 布局类属性（
display、width、position）一律无效，slot内容的布局责任应由使用者承担 - 不要用
::slotted(*)试图统一控制所有插槽内容，既不可靠又违背封装原则
var()，而不是指望“挂个class就全变”。漏掉一个fill或一个::placeholder，主题切换就会出现局部卡顿。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
