Shadow DOM 默认完全隔离样式，外部CSS不参与内部样式计算；正确做法是将CSS通过CSSStyleSheet或<style>节点注入shadowRoot，并注意Tailwind配置、路径及继承限制。
attachShadow 创建的 Shadow DOM 默认完全隔离样式，外部 CSS 文件、全局选择器（如 body、button、.btn）压根不会参与其内部元素的样式计算——不是权重低、不是没加载，是浏览器根本“不看”。
直接原因：外部样式表根本进不了 Shadow DOM 的 CSSOM
- 浏览器在解析 Shadow DOM 时，会为它构建独立的 CSS 对象模型（CSSOM），这个过程完全不读取 document 中的
<link>或<style> -
@import在 Shadow DOM 内部支持极差，Chrome 120+ 才稳定，Firefox/Safari 更不可靠 - 即使你在父页面写了
button { color: red !important }，Shadow 内的<button>也完全收不到——!important只在同一个作用域内生效，跨 boundary 就是“无信号” -
mode: "closed"不影响样式隔离能力，但会让shadowRoot对 JS 和 DevTools 不可见，导致你连注入都失败（element.shadowRoot返回null）
正确做法：把 CSS 内容真正“放进” shadowRoot
- 必须用 JavaScript 动态创建
<style>节点，并把 CSS 文本写入textContent - 或使用
CSSStyleSheet实例 +adoptedStyleSheets（更现代、可复用、支持 HMR） - 示例（推荐
CSSStyleSheet方式）：const sheet = new CSSStyleSheet(); await sheet.replace(await fetch('/tailwind.css').then(r => r.text())); shadowRoot.adoptedStyleSheets = [sheet]; - 若用
<style>节点，务必在connectedCallback或firstUpdated（Lit）中执行，不能早于attachShadow
Tailwind 用户特别注意的三个硬性条件
-
tailwind.config.js的content字段必须覆盖 Shadow DOM 模板路径（如'./src/*<em>/</em>.ts'），否则 JIT 根本不生成对应类（.p-4就不存在） - 动态拼接的类名（如
class="${cls}"）必须显式加到safelist，否则被裁剪 - 构建产物中的
tailwind.css必须能被运行时fetch到（路径是 public 下可访问地址，不是源码路径）
容易被忽略的继承细节：color / font-family 并不自动穿透
-
color、font-family、line-height是可继承属性，但 Shadow DOM 中默认不继承宿主元素的这些值，除非显式写：:host { color: inherit; font-family: inherit; } -
::slotted(*)只能设置可继承属性，且仅对<slot>投影进来的内容生效；它不能设margin、display、width -
:host-context()可用于响应外部状态（如body.dark-mode > my-card），但它依赖 light DOM 结构，不是通用穿透方案
真正起作用的只有两条路：把样式内容注入进去，或用 :host / ::slotted() 显式声明边界协议。其他所有“试试加 !important”“把 <link> 放进 innerHTML”“用 @apply”都是无效动作。
