part属性本身不携带css变量，必须显式绑定；需通过exportparts导出节点并在其上设置变量值，外部:part()才能生效，且须设回退值、避免closed shadow、注意微前端隔离及过渡声明。
part属性本身不携带CSS变量，必须显式绑定
很多人以为给元素加 part="header" 就能自动把主题变量注入进去，结果发现 :part(header) { color: var(--header-color); } 完全不生效。根本原因：CSS 变量不会因为 part 属性存在就自动继承或传播——part 只是 DOM 标识符，不是变量容器。
真正起效的路径只有一条：在自定义元素内部（比如 Web Component 的 Shadow DOM 中），用 exportparts 显式导出结构节点，并在该节点上通过内联 style 或组件级 CSS 规则设置变量值。
-
exportparts必须写在自定义元素定义时，例如：customElements.define('my-card', class extends HTMLElement { ... });里需声明this.attachShadow({ mode: 'open' }).innerHTML = '<h2 part="title" style="--title-color: #333;">...</h2>'; - 外部样式中
:part(title) { color: var(--title-color, #666); }才能读到这个变量；漏掉回退值var(--title-color, #666)，变量未定义时会渲染为透明或默认色 - 如果子组件用了
attachShadow({ mode: 'closed' })，外部:part()选择器完全无法命中，此时只能靠data-theme+:root全局变量兜底
全局主题变量和 part 作用域不能混用
把品牌色定义在 :root（如 --primary: #007bff）没问题，但别指望 :part(button) { background: var(--primary); } 能“自动响应”深色模式切换——除非你同时确保两件事：一是 document.documentElement.setAttribute('data-theme', 'dark') 已执行，二是所有用到 var(--primary) 的地方都写了回退值且 CSS 规则权重足够高。
更常见的问题是：你在 :root 里改了 --primary，但 :part(button) 的样式没重算，按钮颜色不变。这不是 bug，是预期行为：CSS 变量更新会触发重绘，但 :part() 选择器本身不监听变量变化，它只匹配 DOM 结构。
- 变量更新后，浏览器会重新计算所有引用它的样式，但前提是这些样式规则已存在且未被更高优先级覆盖
- 不要在
:part()规则里写媒体查询嵌套变量（如@media (prefers-color-scheme: dark) { :part(button) { --bg: #121212; } }），这语法非法，整条规则会被忽略 - 若组件需独立于全局主题（比如一个始终浅色的卡片），应在组件根元素上直接设内联变量：
<my-card style="--card-bg: #fff;"></my-card>，而不是依赖:root
微前端下 part + CSS 变量失效的典型场景
在 qiankun 或 MicroApp 环境中，:part() 经常“突然失灵”，尤其在启用 strictStyleIsolation: true 后。这不是 CSS 变量的问题，而是 Shadow DOM 边界和 host 包裹层级导致的匹配失败。
典型现象：<my-app part="header"></my-app> 在主应用里写 my-app:part(header) { ... } 生效，但子应用内部的 <h2 part="title"></h2> 却不响应——因为 my-app 是 host 元素，而 <h2></h2> 在它的 Shadow DOM 内部，外部样式无法穿透。
- 解决方案一：子应用在定义组件时，用
exportparts="title:header-title"并对外暴露命名后的 part 名，主应用对应写my-app:part(header-title) - 解决方案二：放弃
:part()，改用data-theme+ 全局变量，在子应用初始化时读取document.documentElement.dataset.theme，再动态设置组件内部变量 - 绝对不要尝试用 JS 遍历子应用 Shadow DOM 并手动 setAttribute——违反封装原则，且在 closed shadow 下不可行
如何让 part 样式响应主题切换动画
CSS 变量本身支持过渡（transition: background-color 0.2s），但 :part() 选择器里的属性不会自动获得过渡效果，除非你显式声明。
比如想让 :part(button) 的背景色平滑变色，不能只靠 background-color: var(--button-bg)，还得在同一个规则里加 transition 声明。否则变量值变了，浏览器直接跳变。
- 正确写法：
:part(button) { background-color: var(--button-bg, #007bff); transition: background-color 0.2s ease; } - 错误写法：把
transition写在my-button元素上，或者写在:root里——过渡属性必须和被过渡的属性在同一选择器内 - SVG 图标填色、placeholder 文字色、box-shadow 这些容易被忽略的地方，也要单独加
transition，否则主题切换时会“闪一下”
part 还是 data-theme，只要涉及跨 Shadow DOM 的样式控制，就必须确认变量是否真的被注入到了目标节点的作用域里——用 DevTools 的 Computed 面板直接查 color 计算值，比猜要快得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
