根本原因是CSS变量继承链仅限宿主元素自身，必须显式声明在:host或宿主元素上，不能依赖body等祖先节点；浏览器只读取宿主的计算样式，不向上遍历查找。
为什么var(--color)在Shadow DOM里取不到值
根本原因不是变量“传不进去”，而是继承链断在了宿主元素上——--color必须挂在自定义元素自身（即:host），不能靠祖先节点（比如body或外层div）传递。
常见错误写法：body { --color: red; } 或 .wrapper { --color: red; }，这些规则对Shadow DOM完全无效。浏览器只认宿主元素的计算样式，不向上遍历DOM树找变量。
- ✅ 正确方式：在宿主元素上加class或attribute，再用
:host(.dark) { --color: #1e293b; }声明 - ✅ 或直接写内联样式：
<my-button style="--color: #3b82f6;"></my-button> - ❌ 错误方式：把
:root定义放在全局CSS文件里，指望它透入所有Shadow DOM - 调试时用
getComputedStyle(host).getPropertyValue('--color')确认值是否真实存在，别只看DevTools的Computed面板
::slotted()能设color但设不了margin的原因
::slotted()不是万能选择器，它只允许设置可继承属性（如color、font-family、line-height），对布局类属性（margin、padding、display）完全无效——这是规范限制，不是浏览器bug。
-
::slotted(p) { color: var(--text-color); }✅ 有效，作用于slot中顶层<p> -
::slotted(*) { margin: 16px; }❌ 被浏览器静默忽略，margin不可继承 - slot内容的布局控制必须由宿主组件内部结构承担，不能依赖
::slotted()强行干预 - 如果需要统一间距，建议在宿主容器上设
padding，或让插槽内容自己带class处理
用户代理样式（UA）覆盖inherit导致文字变蓝
哪怕宿主写了color: inherit，Shadow DOM里的<a>还是蓝色——这不是继承失败，是浏览器UA样式（a { color: -webkit-link; }）优先级高于继承值。
立即学习“前端免费学习笔记（深入）”；
- 必须显式重置：
a { color: inherit; }，不能只靠:host { color: inherit; } - 类似顽固元素（
button、input、select）也需单独处理：button { all: unset; color: inherit; } - 避免用
* { all: unset }——它会清掉display、box-sizing等关键非继承属性，导致布局崩溃 - 更稳妥的重置方案：
:host { color: inherit; font-family: inherit; line-height: inherit; }+ 针对性元素补充
动态注入样式时innerHTML = '<style>...</style>'为何失效
Shadow DOM不解析内联<style>标签——它被当作文本节点处理，根本不会进入CSSOM，所以规则永不生效。
- ✅ 正确做法：用
document.createElement('style')创建节点，再shadowRoot.appendChild(styleEl) - ✅ 更现代方案（Chrome 73+/Safari 16.4+）：
const sheet = new CSSStyleSheet(); sheet.replaceSync(cssText); shadowRoot.adoptedStyleSheets = [sheet]; - ❌ 禁止：
shadowRoot.innerHTML = '<style>...</style><div>...</div>'，<style>部分被忽略 - 第三方HTML字符串含
<style>时，必须先提取CSS文本，再用上述任一方式注入，绝不能直接拼接
真正麻烦的不是变量传不进去，而是传进去了却被UA样式悄悄覆盖；每次往Shadow DOM里加新HTML元素（比如临时塞个<input type="date">），都得查一遍它的UA默认值会不会破坏现有设计。
