能实现，而且是目前唯一被规范支持、无需polyfill、不破坏封装性的动态定制方式；变量必须声明在宿主元素自身上，通过继承链由shadow内部用var(--name,fallback)主动读取，兼顾隔离性与可定制性。
能实现，而且是目前唯一被规范支持、无需 polyfill、不破坏封装性的动态定制方式。关键不在“穿透”，而在“继承链可控”——变量必须挂在宿主元素上，由 shadow 内部通过 var(--name, fallback) 主动读取，既保隔离，又留钩子。
变量必须声明在宿主元素自身上
Shadow DOM 的边界会截断继承链，外部 :root 或父容器设置的变量进不去 shadow tree。只有直接写在组件标签上的变量才能被内部读到。
- ✅ 正确：
<my-card theme="dark"></my-card>+my-card[theme="dark"] { --card-bg: #1e1e1e; --text-color: #f0f0f0; } - ❌ 无效：
<div class="wrapper"><my-card></my-card></div>+.wrapper { --card-bg: red; }（变量没挂到 host，继承链在此中断） - JS 动态设置也同理：
element.style.setProperty('--card-bg', '#2d2d2d')，只影响该实例
shadow 内部要用 var() + fallback 保障健壮性
变量未定义时不会报错，但会回退到 fallback 值。所有可定制属性都应带默认值，避免样式崩塌。
- 在 shadowRoot 的
<style></style>中写：.header { background: var(--card-header-bg, #f8f9fa); color: var(--card-title-color, #212529); } - fallback 不是兜底穿透，而是安全兜底；拼错变量名或作用域不匹配时，就用它
- 颜色、圆角、间距、阴影、字体大小等视觉属性，都建议通过变量暴露
用 :host 配合变量控制宿主自身样式
仅靠变量只能改 shadow 内部节点，若要让主题也影响宿主外框、边框、圆角等，需在 shadow 内部用 :host 读取变量。
:host { border-radius: var(--card-radius, 8px); border: var(--card-border, 1px solid #e9ecef); }-
:host([size="large"]) { --font-size: 1.25rem; }—— 支持属性条件分支 -
:host(:hover) { --shadow: 0 4px 12px rgba(0,0,0,0.15); }—— 支持伪类响应 - 注意：
:host只能在 shadowRoot 的<style></style>里写，不能放外部样式表
避开常见失效陷阱
很多“变量不生效”问题其实和 Shadow DOM 机制理解偏差有关。
- 变量无法驱动
@media或@keyframes内部逻辑（旧版 Safari 有兼容问题） - slot 投入的内容不受 shadow 内变量影响，
var(--color)对<slot></slot>里的<p></p>无效 - 小程序中全局变量要写在
page或body下，不能用:root（不支持） - 调试时用 Chrome DevTools → Elements → 右键组件 → “Show inherited CSS properties” 查变量是否传入
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
