shadow dom 默认完全隔离样式，外部css不参与内部样式计算；正确做法是将css通过cssstylesheet或节点注入shadowroot，并注意tailwind配置、路径及继承限制。

attachShadow 创建的 Shadow DOM 默认完全隔离样式，外部 CSS 文件、全局选择器（如 body、button、.btn）压根不会参与其内部元素的样式计算——不是权重低、不是没加载，是浏览器根本“不看”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

直接原因：外部样式表根本进不了 Shadow DOM 的 CSSOM

• 浏览器在解析 Shadow DOM 时，会为它构建独立的 CSS 对象模型（CSSOM），这个过程完全不读取 document 中的 <link> 或 <style></style>
• @import 在 Shadow DOM 内部支持极差，Chrome 120+ 才稳定，Firefox/Safari 更不可靠
• 即使你在父页面写了 button { color: red !important }，Shadow 内的 <button></button> 也完全收不到——!important 只在同一个作用域内生效，跨 boundary 就是“无信号”
• mode: "closed" 不影响样式隔离能力，但会让 shadowRoot 对 JS 和 DevTools 不可见，导致你连注入都失败（element.shadowRoot 返回 null）

正确做法：把 CSS 内容真正“放进” shadowRoot

• 必须用 JavaScript 动态创建 <style></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></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></slot> 投影进来的内容生效；它不能设 margin、display、width
• :host-context() 可用于响应外部状态（如 body.dark-mode > my-card），但它依赖 light DOM 结构，不是通用穿透方案

真正起作用的只有两条路：把样式内容注入进去，或用 :host / ::slotted() 显式声明边界协议。其他所有“试试加 !important”“把 <link> 放进 innerHTML”“用 @apply”都是无效动作。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！