自定义元素可通过css变量继承机制读取:root定义的变量，但需避免shadow dom隔离导致失效，正确做法是在:host中透传变量、纯css驱动响应式主题、统一使用document.documentelement.classlist控制主题切换。
自定义元素里怎么读取 :root 的 CSS 变量
自定义元素（Custom Element）默认能读到 :root 定义的变量，但前提是它没被 Shadow DOM 隔离——或者即使隔离了，也得显式继承。Shadow DOM 默认是样式封闭的，var(--theme-primary) 在 shadow 内部直接写是无效的，除非你手动把变量透进来。
常见错误现象：<my-button></my-button> 里写了 background-color: var(--theme-primary);，但按钮始终灰色，控制台也没报错。
- 如果用了
attachShadow({ mode: 'closed' })，变量根本不可见，必须改用'open'或在构造函数里手动同步 - 更稳妥的做法是在组件内部的
<style></style>中，用:host { --theme-primary: var(--theme-primary, #3b82f6); }做一次“透传” - React/Vue 封装的组件若包裹了自定义元素，还要确认父级没用
scoped或css-in-js拦截了变量继承
为什么不能在 custom element 定义里直接写 :root
:root 是文档级伪类，只能出现在顶层样式表中（ 内的 <style></style> 或外部 CSS），不能塞进自定义元素的 template.innerHTML 或 adoptedStyleSheets 里——浏览器会忽略它，变量不会注册。
容易被忽略的引用点：哪怕你在组件内 <style></style> 里写了 :root { --x: red; }，这个 --x 也不会进入全局作用域，其他组件或 body 都读不到。
- 所有主题变量必须统一定义在
的<style></style>或外部 CSS 的:root块中 - 自定义元素只负责“消费”，不负责“声明”；它的
adoptedStyleSheets只能加载已存在的变量，不能新建 - 构建工具（如 Lit、Stencil）生成的 CSS 里若含
:root，需确保最终注入位置是document.head，否则变量失效
切换主题时，custom element 怎么响应更新
靠 CSS 变量本身就能响应，但前提是组件内部样式真正用了 var()，且没被硬编码覆盖。很多自定义元素在初始化时用 JS 读了一次 getComputedStyle 然后缓存颜色值，结果主题切了，按钮颜色却卡死。
- 避免在
connectedCallback里做一次性取值：this.color = getComputedStyle(this).getPropertyValue('--theme-primary'); - 正确做法是纯 CSS 驱动：
button { background-color: var(--theme-primary); transition: background-color 0.2s; } - 如果必须用 JS 控制（比如 SVG 的
fill动态设值），监听document.documentElement的style变化，或用MutationObserver观察class变更 - 别用
cssText批量重写 style —— 会清掉其他 JS 注入的内联样式，比如动画状态、焦点 outline 等
data-theme 和 class 切换混用时的优先级陷阱
自定义元素可能同时监听 data-theme 属性和 .dark 类，但两者不互通。比如你用 classList.toggle('dark') 切主题，但组件里只写了 [data-theme="dark"] .icon 规则，那图标颜色根本不会变。
- CSS 选择器权重决定谁生效：
html[data-theme="dark"]（权值 20） >body.dark（权值 10） - 如果自定义元素依赖
data-theme，就得用setAttribute('data-theme', 'dark')，而不是操作 class - 第三方 UI 库（如 Shoelace、Ionic）通常只认
data-theme，而你自己写的组件可能只监听 class，导致局部失步 - 最稳方案：统一挂载点 —— 全部用
document.documentElement.classList.toggle('dark')，CSS 全部写成.dark :host或.dark ::slotted(*)
真正难的不是写几行 setProperty，而是确保每个 var() 都落在渲染链的正确位置：从 :root 声明，到 html class 控制，再到 Shadow DOM 内部透传，最后不被 JS 缓存或硬编码截断。漏掉任意一环，主题就断在某个按钮、某条边框、某个 SVG 图标上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
