shadow dom 不自动继承外部可继承样式，需在 :host 显式声明 inherit 并为子元素（如 a、button）单独重置；::slotted(*) 仅对投影内容生效且不支持布局属性。
Shadow DOM 内部不会自动继承外部的 font-family、color、line-height 等可继承属性，除非你在宿主元素（:host）上显式声明并配合 inherit 主动拉取——这不是“没传进来”，而是浏览器压根不往上查 body 或 html。
为什么 body { color: red } 对 Shadow DOM 里的 <p></p> 无效？
因为继承链在宿主元素处就断了。浏览器计算 Shadow DOM 内部元素样式时，只看宿主元素自身的计算样式，不会继续向上遍历 DOM 树找 body 或外层 div 上定义的值。哪怕 body 设了 --text-color: red，只要没挂到宿主上，var(--text-color) 就取不到。
-
document.body.style.setProperty('--text-color', 'red')→ 完全无效 -
<my-button style="--text-color: red"></my-button>→ ✅ 有效 -
my-button[theme="dark"] { --text-color: #1e293b; }配合:host([theme="dark"]) { }→ ✅ 有效 - 调试时用
getComputedStyle(host).getPropertyValue('--text-color')确认是否真有值，别只信 DevTools 的 Computed 面板
:host { font-family: inherit; } 必须写，但还不够
只写 :host { font-family: inherit; } 只影响宿主自身，不影响内部子节点。真正起作用的是子节点主动继承：p, span, a { font-family: inherit; }。更麻烦的是，a、button、input 这些元素自带 UA 样式，会覆盖继承来的 color，导致文字还是蓝色。
- 必须单独重置顽固元素：
a { color: inherit; }、button { all: unset; color: inherit; } - 避免
* { all: unset }—— 它会清掉display、box-sizing，直接让布局崩溃 - 推荐组合：
:host { color: inherit; font-family: inherit; line-height: inherit; }+a, h1, p { color: inherit; } - 如果组件要“白板化”，优先考虑
:host { all: revert-layer; }（Chromium 115+），比手动列属性更安全
::slotted(*) 不能当万能重置工具
::slotted(*) 只对通过 <slot></slot> 投影进来的顶层节点生效，且只允许设置可继承属性。它对 margin、padding、display 等布局属性完全静默忽略——不是浏览器 bug，是规范限制。
-
::slotted(p) { color: var(--text-color); }→ ✅ 有效 -
::slotted(*) { margin: 16px; }→ ❌ 被浏览器忽略 - 插槽内容的间距控制，应由宿主容器的
padding或内容自身 class 承担 - 不要指望
::slotted(*)替代内部子选择器重置
最常被忽略的点不是“怎么继承”，而是“继承到了却被 UA 样式悄悄覆盖”。每次往 Shadow DOM 里加新标签（比如突然塞个 <select></select>），都要单独检查它的默认 UA 值是否干扰了设计意图——这没法一劳永逸，只能逐个确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
