bootstrap类在shadow dom中不生效是设计使然，因shadow dom默认样式封装；需用adoptedstylesheets复用已加载的cssstylesheet实例，并显式设置:host { display: block; width: 100%; }以支持栅格布局。
Bootstrap类在Shadow DOM里完全不生效？不是bug，是设计如此
Shadow DOM默认启用样式封装，外部CSS（包括引入的Bootstrap）根本不会应用到shadow内部节点上。button.btn在shadowRoot里就是个裸按钮——没圆角、没padding、没背景色。这不是加载失败或路径错误，而是浏览器按规范“故意”不匹配。
用adoptedStyleSheets复用已加载的Bootstrap CSSSheet
别复制CSS字符串，也别往shadowRoot.innerHTML里塞<link>——前者维护爆炸，后者会加载到全局，失去隔离意义。正确做法是复用已存在的CSSStyleSheet实例：
-
const bootstrapLink = document.querySelector('link[href*="bootstrap"]')，确保它已在document.head中加载完成 -
const sheet = bootstrapLink.sheet，注意sheet可能为null（如CORS阻断或未加载完），需加判空 - 在
connectedCallback中执行：this.shadowRoot.adoptedStyleSheets = [sheet] - 响应式媒体查询（如
@media (min-width: 576px)）会生效，但前提是该规则属于sheet且已被注入
.row/.col布局塌陷？得手动补宿主容器样式
Bootstrap栅格依赖父容器宽度和display行为，而shadow host默认是inline，.row子元素无法正确计算宽度。必须显式设置宿主样式：
- 在组件
<style></style>里写：:host { display: block; width: 100%; } - 若需响应式宽度，不能只靠
.container，得配合:host([fluid]) { width: 100vw; }这类条件控制 -
::slotted(*)无法影响.col内部子元素的继承链，所以font-size、color等仍需通过:host透传CSS变量
别踩这些坑：复制CSS、滥用:host(.btn)、忽略JS插件初始化
常见翻车点集中在三处：
- 在
shadowRoot里手写<style>.btn { ... }</style>——等于重写整套Bootstrap，伪类（:hover）、状态（:focus）、变体（.btn-outline-danger）全得自己补 - 误用
:host(.btn)试图复用类名——:host只匹配自定义元素自身，不匹配其子节点上的class="btn"；正确写法是:host .btn，但前提是你已注入完整sheet - Bootstrap JS插件（如
Modal、Dropdown）默认查document，需手动传入shadowRoot内节点：new bootstrap.Modal(this.shadowRoot.querySelector('.modal'))
真正难的不是创建shadow root，而是让所有资源路径、事件绑定、CSS变量继承都对齐shadow上下文——比如background-image: url(./icon.svg)里的相对路径，是以shadow host为基准，不是HTML文档根目录。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
