Shadow DOM 默认阻断样式继承，仅可继承属性（如color、font-family、自定义属性）能自然穿透，不可继承属性需通过inherit、自定义属性或::part()显式传递。
Shadow DOM 默认会阻断样式继承，必须显式开放
Shadow DOM 的根本特性是样式隔离，父组件的 CSS 不会自动穿透到 shadow root 内部。这不是 bug，而是设计使然。如果你期望子组件继承父级字体、颜色或自定义属性（如 --primary-color），必须主动打通——靠的是 CSS 继承链本身，而非选择器穿透。
关键点在于：CSS 中可继承的属性（如 color、font-family、line-height、--xxx 自定义属性）会自然穿过 shadow boundary，只要 shadow host 元素上声明了它们；而不可继承属性（如 background、padding、border）则完全不会透入。
- 在 host 元素上设置
color: #333，其 shadow root 内未设color的文本会自动继承 - 在 host 上声明
style="--accent: blue"，shadow 内可用var(--accent)直接读取 - 但
background: white设在 host 上，对 shadow 内部<div>无效，除非该<div>显式写background: inherit
用 :host 和 :host-context() 控制宿主样式作用域
:host 是唯一能从 shadow 内部反向影响宿主元素样式的伪类，但它不解决“继承”，只解决“宿主该长什么样”。真正用于继承控制的是它的组合用法：
-
:host { color: inherit; font: inherit; }—— 让宿主自身继承外部字体/颜色，再靠继承链传入 shadow 内部 -
:host([disabled]) { opacity: 0.6; }—— 基于宿主属性做样式响应，不影响内部继承逻辑 -
:host-context(.theme-dark) .label { color: white; }—— 仅当宿主被包裹在.theme-dark环境中时才生效，属于条件性样式注入，不是继承
注意：:host-context() 已被多数现代浏览器弃用（Chrome 99+、Firefox 100+ 不推荐），应改用 exportparts + ::part() 或 CSS 自定义属性配合 JS 动态设置。
通过 inherit、unset 和自定义属性显式传递非继承值
想让 shadow 内部某元素使用父级的 padding 或 border-radius？这些属性默认不继承，得手动“拉进来”：
- 在 shadow root 的顶层元素（如
<slot>包裹容器）上写padding: inherit，前提是宿主元素本身设置了padding - 用
all: inherit要极度谨慎——它会覆盖 shadow 内部所有重置样式，包括box-sizing、display等关键值 - 更稳妥的方式是暴露自定义属性：宿主设
style="--input-padding: 8px 12px"，shadow 内写padding: var(--input-padding) - 若需 fallback，写成
padding: var(--input-padding, 4px 8px)
避免滥用 /deep/、::ng-deep 或 !important 强行穿透
这些是过时或框架专属的 hack 手段，现代标准 Shadow DOM 中已无对应机制：/deep/ 和 ::shadow 早在 Chrome 63 就被移除；::ng-deep 是 Angular 特有前缀，本质是编译期插件，不改变 Shadow DOM 行为；!important 在 shadow 内部声明后，无法被外部样式覆盖，反而破坏封装性。
真正可控的方式只有两种：一是利用继承链和自定义属性，二是通过 exportparts + ::part() 暴露可被外部定制的子节点（需浏览器支持，Chrome 100+、Safari 16.4+、Firefox 115+）。
最易被忽略的一点：自定义属性是否“可继承”，取决于它是否在宿主上被设置——而不是在 shadow 内声明。很多人把 --size 写在 shadow 样式里，却指望外部能修改它，这不可能生效。
