shadow dom 不会自动继承外部 color 等可继承属性，因继承链止于宿主元素；正确做法是在宿主上设 css 变量并配合 inherit 或 var() 使用，且变量必须挂载在宿主或其直系祖先上。
Shadow DOM 不会自动继承外部的 color、font-family、line-height 等可继承属性，除非你显式写 inherit 或在 :host 上设值；更麻烦的是，用户代理样式（如 a 默认蓝色）会优先覆盖继承值——这是绝大多数人卡住的根源。
为什么 body { color: white } 对 Shadow DOM 里的文字无效
不是继承机制坏了，而是浏览器只沿 DOM 树向上查到宿主元素（比如 <my-card></my-card>）就停了，body 的声明根本进不去。哪怕宿主父级有 style="--text-color: white"，若没挂到宿主自身，var(--text-color) 也取不到。
-
getComputedStyle(host).getPropertyValue('--text-color')返回空字符串？说明变量根本没设到宿主上 - 用
:host-context(.dark)响应外部 class 时，.dark必须直接挂在或宿主的直系祖先上，中间插一层 wrapper 就断链 - 别把变量定义在全局
:root里指望它透入所有 Shadow DOM——必须靠宿主“中转”
如何安全重置 Shadow DOM 内部继承性样式
不能靠 * { all: unset } 或 * { all: initial } 全局重置：前者清掉 display、box-sizing 导致布局崩，后者让字体、行高全退回 UA 默认值，反而更难控。
- 推荐方案：在 Shadow Root 的顶层
<style></style>中写:host { color: inherit; font-family: inherit; line-height: inherit; } - 对顽固元素单独处理：
a, button, input, select { color: inherit; }—— 因为 UA 样式（如a { color: -webkit-link; }）优先级高于继承值 -
::slotted(*)不能设margin或display，它只允许设置可继承属性；想统一插槽内容间距，应在宿主容器上设padding
动态注入第三方 CSS 时怎么避免污染全局
shadowRoot.innerHTML = '<link rel="stylesheet" href="...">' 是危险操作：这个 <link> 会被加载到全局上下文，彻底破坏隔离。
- 正确做法：解析返回 HTML 字符串，提取
<style></style>内容，用new CSSStyleSheet()构造实例，再通过adoptedStyleSheets注入（Chrome 73+/Safari 16.4+ 支持） - 兼容 fallback：不支持
adoptedStyleSheets时，用document.createElement('style')创建节点并append到shadowRoot，但注意后续无法动态更新 - 远程
<link>的 CSS 路径需主应用代理，否则url(./img.png)在 Shadow DOM 里会 404
currentColor 和 inherit 在 Shadow DOM 里的行为差异
currentColor 能跨 boundary，inherit 不能——这是最容易被忽略的关键点。因为 currentColor 取的是宿主元素最终计算出的 color 值，而 inherit 只继承声明值，且在 Shadow boundary 处中断。
- 宿主没显式设
color（哪怕只是color: var(--c)），currentColor就无源可溯 -
--x: inherit在 CSS 变量里是非法写法，会直接失效；变量只能存具体值或var()引用 - 调试时优先检查：
getComputedStyle(host).color是否有值，而不是只看 DevTools 的 Computed 面板
真正麻烦的不是继承不到，而是继承到了却被 UA 样式悄悄覆盖；每次加新 HTML 标签（比如突然塞个 <input type="date">），都要单独确认它的 UA 默认值是否干扰了设计意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
