shadow dom 中 color 和 font-family 并非继承失败，而是被浏览器用户代理样式（如 a 默认蓝色）优先覆盖；需对 a、input 等元素显式设 color: inherit 才能生效。
Shadow DOM 为什么拿不到 body 的 color 和 font-family
不是“继承失败”，而是继承被浏览器用户代理样式（UA stylesheet）当场覆盖了。比如 body { color: #333; } 确实会传进 Shadow DOM，但 a 标签一渲染，UA 规则 a { color: -webkit-link; } 就直接赢了层叠顺序——它优先级更高，且不依赖继承链。
可继承属性（color、font-family、line-height 等）能穿 Boundary，但仅限于“没被 UA 或内部规则显式覆盖”的情况。一旦元素有 UA 默认样式，你就得手动干预。
-
a、h1、button、input这些元素都要单独加color: inherit;，不能指望一次设在:host就万事大吉 -
::slotted(*)不适用：它只作用于 slot 内容，且对display、margin等关键属性无效 - 别用
* { all: initial; }全局重置——它会把display清成inline，布局直接崩
为什么 在 shadowRoot 里完全没反应
Shadow DOM 不继承父文档的资源加载行为。<link rel="stylesheet" href="/tailwind.css"> 放进 shadowRoot.innerHTML 或通过 appendChild 插入，浏览器直接忽略——它压根不会发起请求，也不会解析里面的选择器。
根本原因在于 Shadow DOM 的样式边界是硬隔离的：@import、外部 <link>、甚至 css`` 模板字符串生成的规则，都依赖全局作用域匹配，而 Shadow Root 内部没有该作用域上下文。
- 唯一有效路径是把编译后的完整 CSS 字符串，用
style.textContent = cssString注入到shadowRoot - 不能只放一个空
<link>标签，也不能用adoptedStyleSheets直接塞外部CSSStyleSheet对象（除非你用CSSStyleSheet构造函数手动创建并注入） - Tailwind 的
@apply在 Shadow DOM 里失效，因为它最终还是要靠外部类名匹配，而外部类名规则根本进不去
:host 是唯一合法的“外部入口”，但只管宿主自身
:host 伪类不是透传通道，它是你把外部样式“挂载”到宿主元素上的唯一合规位置。你在 :host { color: red; } 里写的值，只影响自定义元素自身（比如 <my-button></my-button> 的盒模型），不会自动流到它内部的 p 或 span。
子元素要拿到值，必须显式写 color: inherit; —— 这不是多此一举，而是继承链的主动拉取动作。否则就算 :host 上设了 --primary: blue;，内部 div { background: var(--primary); } 也拿不到，因为变量没进入继承链。
-
:host上设--x: inherit;是错的：如果宿主自己没声明--x，inherit就无源可溯 -
:host-context(.dark) { --bg: #111; }可以响应外部 class，但内部仍需div { background: var(--bg); }才生效 - iOS Safari 16.4 及更早版本存在 CSS 变量继承 bug，即使写法全对，也可能读不到 —— 这是 WebKit 引擎缺陷，不是代码问题
微前端里硬套 Shadow DOM 会踩哪些坑
把整个子应用（比如 Vue/React SPA）挂进 shadowRoot，不是隔离，是自废武功。这不是样式问题，是运行时环境塌方。
常见崩点包括：document.querySelector('body') 返回 null，所有依赖全局 DOM 查找的逻辑失效；第三方 UI 库（如 antd）默认挂载到 document.body，节点跑出 Shadow Root，样式和事件全丢；@font-face 和 @keyframes 无法跨 boundary 加载，图标和动画消失；CSS 变量继承中断，主题色传不进去。
- Shadow DOM 解决的是「组件级封装」，微前端要的是「运行时应用共存」——目标不同，机制不兼容
- qiankun/micro-app 的 “Shadow DOM 模式” 是劫持 + 前缀模拟，并非原生，伪类选择器（
:hover）、属性选择器（[data-id]）照样泄漏 - 频繁切换子应用时，
shadowRoot创建销毁开销比 class 切换高 3–5 倍，且 Chrome DevTools 无法 inspectmode: 'closed'内部结构
真正麻烦的从来不是“继承不到”，而是“继承到了，却被 UA 样式或变量未声明静默覆盖”。每次往 Shadow DOM 里加新 HTML 元素（比如突然塞个 select 或 textarea），都得单独检查它的 UA 默认样式是否干扰了你的设计意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
