因为Shadow DOM边界截断继承链，:root变量无法进入，而:host能读取宿主及祖先声明的变量，只要挂载位置正确（如<html class="theme-dark">或<my-button theme="dark">），内部var(--bg-color, #fff)即可实时取值。
为什么:host里用var()才能响应主题切换
因为Shadow DOM边界会截断CSS继承链，:root定义的变量默认进不去，但:host能读取宿主元素及其祖先上声明的变量。只要变量挂载位置正确（比如<html class="theme-dark">或<my-button theme="dark">），内部var(--bg-color, #fff)就能实时取值。
常见错误现象：主题切换后按钮背景变了，但文字颜色卡死——说明color没写var(--text-color)，只写了硬编码值；或者变量定义在body上，而body不是宿主的祖先节点，导致继承链断裂。
-
:host必须写在Shadow DOM内部的<style>里，不能写在外部CSS中 - fallback值（逗号后的部分）不是可选的，漏写会导致未定义时渲染异常（如透明、继承默认色）
- 变量名建议加前缀，比如
--theme-bg而非--bg，避免和第三方库冲突
:host-context(.theme-dark)和:host([theme="dark"])怎么选
:host-context(.theme-dark)适合全局主题控制，比如整个页面切暗色模式；:host([theme="dark"])适合组件级独立主题，比如某个按钮强制用深色，不管页面当前主题。
性能上:host-context()略低，因为它要向上遍历祖先匹配class，而:host([attr])只检查宿主自身属性，更快更可控。
立即学习“前端免费学习笔记（深入）”；
- 用
:host-context()时，确保class确实加在宿主的某个祖先上（通常是<html>或<body>），否则不生效 - 布尔属性如
disabled，统一用:host([disabled])，别写:host([disabled="true"])——DOM中disabled属性无值，字符串匹配会失败 - 若需支持旧版Safari（16.4之前），
:host-context()可能不触发，此时降级用:host(.theme-dark)+ JS动态切class
主题变量该挂在哪一级才可靠
变量必须设在宿主元素本身，或其直系祖先（<html>、<body>、父容器）。挂错位置是主题失效最常见原因。
错误写法：body .theme-dark { --bg: #222; }——这定义的是两个独立选择器，--bg根本不会被应用；正确写法是分开：:root { --bg: #fff; } + .theme-dark { --bg: #222; }，然后给<html>加class。
- Shadow DOM内部无法读取
document.styleSheets里的变量，只认DOM树上的继承链 - 微前端场景下，子应用挂载到主应用Shadow Root中时，宿主上下文可能丢失，此时
adoptedCallback是唯一能捕获变量重挂载时机的钩子 - 小程序环境（如微信）不支持
:root，变量得挂到page或组件标签自身，否则无效
样式注入方式直接影响主题是否可热更新
用shadowRoot.innerHTML = `<style>...</style>`拼接样式字符串，会导致<style>被当普通HTML解析，不进入CSSOM，后续JS无法修改规则，主题切换就卡死。
正确做法是用DOM方法动态创建并插入<style>节点，或使用adoptedStyleSheets复用已编译样式表（Chrome 73+/Safari 16.4+支持）。
- 不要在模板字符串里插值CSS，有XSS风险；变量值应通过
style.setProperty()或class切换控制 - 如果组件支持运行时换肤，优先用
classList.toggle()切宿主class，而不是反复setAttribute('style', ...) -
::slotted(*)不能设margin或display，这类布局属性对插槽内容完全无效，只能用color、font-family等可继承属性
var()，漏一个，那一块就永远切不动。 
