shadow dom 是唯一能真正切断样式泄露的原生机制，必须用 attachshadow({ mode: 'open' }) 创建隔离容器，样式须注入 shadowroot 内部，:host 和 ::slotted 是唯二合规穿透钩子。
跨团队共享组件库中，仅靠 HTML 标签名（如 button、input）或通用类名（如 .btn）无法实现样式隔离——冲突必然发生，除非你主动建立作用域边界。
为什么 data- 属性本身不隔离样式
很多人在组件外层加 data-team="a"，再写 [data-team="a"] .btn，以为这就隔离了。其实不是：
- 这个选择器只对“你手动写的 CSS”起作用；第三方 UI 库（如 Ant Design、Element Plus）的
.el-button仍会全局生效，完全无视你的data- - 父应用写了
body * { font-size: 14px }，照样穿透进来，data-不阻止继承属性传播 - 子应用动态插入的 DOM（比如通过
v-html或innerHTML渲染的内容）不会自动带上你的data-前缀，样式直接裸奔 - 构建时前缀工具（如 PostCSS 的
postcss-css-namespace）必须全链路统一配置，一个团队漏配，整条隔离链就断
attachShadow({ mode: 'open' }) 是唯一可落地的原生隔离点
真正能切断样式泄露的，只有浏览器原生支持的 Shadow DOM。它不依赖打包器、不看 class 名、不care 是否用了第三方库——只要 DOM 在 shadow 内，外部样式默认进不去，内部样式默认出不来。
- 必须在
constructor()中调用：if (!this.shadowRoot) this.attachShadow({ mode: 'open' })；延迟到connectedCallback就晚了，样式污染已发生 - 别用
mode: 'closed'：它不增强隔离能力，但会让this.shadowRoot返回null，DevTools 看不到结构，CI 测试无法查询节点，协作成本陡增 - 样式必须注入
shadowRoot内部：不能往document.head插<style></style>，也不能用shadowRoot.innerHTML = '<style>...</style>'（<style></style>标签会被当普通 HTML 解析，不进 CSSOM） - 推荐方式：用
CSSStyleSheet实例 +adoptedStyleSheets（Chrome 73+ / Safari 16.4+ 支持），或手动创建style元素并append到shadowRoot
如何让第三方组件“进得来、不出去”
共享库常需封装第三方组件（比如把 react-datepicker 包进自定义 <date-picker></date-picker>），这时既要复用功能，又不能让它样式逃逸：
- 不要直接
render()到 light DOM；所有渲染目标必须是this.shadowRoot - 避免使用
!important覆盖第三方样式——它在 Shadow DOM 内无效，因为不是优先级问题，而是作用域不匹配 - 对外暴露 CSS 自定义属性（如
--date-picker-bg），让使用者通过:host设置，而不是改写内部选择器 - 慎用
::slotted()：它只适用于 slot 内容，且会把样式权交给使用者，若第三方组件没用<slot></slot>，这条路走不通 - 如果第三方库强制注入全局
<style></style>（如某些图表库），需在加载前拦截document.head.appendChild，重定向到shadowRoot
最难的不是写对 attachShadow，而是决定哪些样式该锁死、哪些该开放——比如字体继承是否允许？主题色是否由宿主控制？这些边界一旦画错，后期改造成本远高于初期设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
