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 里”。有三种主流做法，优先级从高到低：
-
adoptedStyleSheets：最推荐。复用已加载的CSSStyleSheet实例，零重复解析，性能好。Chrome 73+、Firefox 93+、Safari 16.4+ 支持 -
innerHTML+<style>：兼容性兜底方案。把 CSS 字符串拼成<style>...</style>插入shadowRoot，但会触发额外解析和 FOUC 风险 - 构造时
append()：在constructor或connectedCallback中动态创建<style>并append到shadowRoot，适合轻量定制
示例（adoptedStyleSheets）：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
const bootstrapLink = document.querySelector('link[href*="bootstrap"]');<br>if (bootstrapLink?.sheet) {<br> this.shadowRoot.adoptedStyleSheets = [bootstrapLink.sheet];<br>}
别踩这些坑：:host、:deep()、复制 CSS 都不管用
以下操作看似合理，实则无效或高危：
- 在组件内写
<style>.btn { ... }</style>：等于重写整套 Bootstrap，维护成本爆炸，且漏掉伪类（:hover）、状态（:focus）、变体（.btn-outline） - 误用
:host(.btn)：它只匹配自定义元素自身，不匹配子元素上的.btn；正确写法是:host .btn，但前提是规则已注入 - 在 Vue/React 项目里滥用
:deep()或::v-deep：它们作用于 light DOM，对 shadow root 完全无效 - 手动复制 Bootstrap CSS 到组件内：体积膨胀、无法享受 CDN 缓存、升级困难
CSS 变量和 ::part() 是穿透之外的可控出口
如果你控制不了第三方 Web Component 的实现，但又需要定制样式，有两个更安全的路径：
-
::part()：如果组件显式暴露了part="trigger"、part="input"等属性，就能用my-date-picker::part(trigger) { border: 1px solid #1890ff; }精准定位，无需注入整套 CSS - CSS 变量：宿主（light DOM）定义
:root { --bs-primary: #0d6efd; }，组件内部用var(--bs-primary)接收。变量值可动态改，且天然跨 shadow boundary
真正难的不是“怎么覆盖”，而是判断该不该覆盖——很多场景下，直接用 adoptedStyleSheets 复用已加载样式表，比任何 hack 都更轻、更稳、更可持续。
