为什么Web Components引入CSS后外部样式无法覆盖？

Shadow DOM 默认隔离样式是设计特性而非bug，外部CSS无法穿透，需通过adoptedStyleSheets、innerHTML+<style>或动态append方式将样式注入shadow root内部。

Shadow DOM 默认隔离样式，不是 bug 是设计

Web Components 用 attachShadow() 创建 shadow root 后，外部所有 CSS（<link>、<style>、全局类）都进不去——浏览器根本不会把 .btn 这类选择器匹配到 shadow 内部的元素上。这不是加载失败，也不是路径写错，是 Shadow DOM 的封装机制在起作用。

常见错误现象包括：<my-button><button class="btn">点我</button></my-button> 渲染出来没圆角、没 padding；.row .col 布局塌陷；响应式媒体查询不生效（除非你把它也注入进 shadow）。

真正生效的方式只有一种：把样式注入 shadow root 内部

必须让 CSS 规则“出现在 shadow root 里”，而不是“放在 document.head 里”。有三种主流做法，优先级从高到低：

1. adoptedStyleSheets：最推荐。复用已加载的 CSSStyleSheet 实例，零重复解析，性能好。Chrome 73+、Firefox 93+、Safari 16.4+ 支持
2. innerHTML + <style>：兼容性兜底方案。把 CSS 字符串拼成 <style>...</style> 插入 shadowRoot，但会触发额外解析和 FOUC 风险
3. 构造时 append()：在 constructor 或 connectedCallback 中动态创建 <style> 并 append 到 shadowRoot，适合轻量定制

示例（adoptedStyleSheets）：

const bootstrapLink = document.querySelector('link[href*="bootstrap"]');

if (bootstrapLink?.sheet) {

this.shadowRoot.adoptedStyleSheets = [bootstrapLink.sheet];

}

别踩这些坑：:host、:deep()、复制 CSS 都不管用

以下操作看似合理，实则无效或高危：

1. 在组件内写 <style>.btn { ... }</style>：等于重写整套 Bootstrap，维护成本爆炸，且漏掉伪类（:hover）、状态（:focus）、变体（.btn-outline）
2. 误用 :host(.btn)：它只匹配自定义元素自身，不匹配子元素上的 .btn；正确写法是 :host .btn，但前提是规则已注入
3. 在 Vue/React 项目里滥用 :deep() 或 ::v-deep：它们作用于 light DOM，对 shadow root 完全无效
4. 手动复制 Bootstrap CSS 到组件内：体积膨胀、无法享受 CDN 缓存、升级困难

CSS 变量和 ::part() 是穿透之外的可控出口

如果你控制不了第三方 Web Component 的实现，但又需要定制样式，有两个更安全的路径：

1. ::part()：如果组件显式暴露了 part="trigger"、part="input" 等属性，就能用 my-date-picker::part(trigger) { border: 1px solid #1890ff; } 精准定位，无需注入整套 CSS
2. CSS 变量：宿主（light DOM）定义 :root { --bs-primary: #0d6efd; }，组件内部用 var(--bs-primary) 接收。变量值可动态改，且天然跨 shadow boundary

真正难的不是“怎么覆盖”，而是判断该不该覆盖——很多场景下，直接用 adoptedStyleSheets 复用已加载样式表，比任何 hack 都更轻、更稳、更可持续。