shadow dom 样式隔离必须通过 attachshadow() 创建真实边界，否则 scoped 属性（已弃用）和 bem 命名均无效；浏览器在样式计算阶段直接跳过跨 boundary 匹配，外部 css（含 !important）根本不可见，唯一合法穿透方式是 :host 和 ::slotted()。
Shadow DOM 组件不是加个 scoped 或写个 class 前缀就能封装的——必须用 attachShadow() 创建真实边界，否则样式照样被全局 CSS 覆盖或泄漏。
为什么 style scoped 和 BEM 类名完全无效
Chrome 120+、Firefox 115+ 已彻底移除 scoped 属性支持，它从未在浏览器中真正实现隔离；BEM 类名如 .card__title 只是命名习惯，h1 { color: red } 这种全局规则依然能穿透覆盖。
根本原因：Shadow DOM 的隔离是浏览器在样式计算阶段就跳过跨 boundary 匹配，不是优先级问题，是“根本看不见”。!important 在这里毫无意义。
-
/deep/、::ng-deep、>>等穿透语法已被全部移除，继续用等于主动放弃兼容性 - 把样式写在外部
<link rel="stylesheet">或<style></style>里，对 shadow 内部元素完全不生效 - 直接在
shadowRoot.innerHTML = `<style>...</style>`中拼接样式，会导致<style></style>被当普通 HTML 解析，不进 CSSOM，后续 JS 动态改样式会失效
正确创建 Shadow Root 并注入样式
必须调用 attachShadow() 获取 ShadowRoot 对象，再用标准 DOM 方法注入样式节点，不能靠字符串拼接。
- 始终用
{ mode: 'open' }——'closed'会让element.shadowRoot返回null，DevTools 无法 inspect，调试时几乎抓瞎 - 推荐用
document.createElement('style').textContent = '...'+shadowRoot.appendChild()，安全且可动态更新 - 若需复用样式，可预建
const baseStyles = new CSSStyleSheet()，再通过shadowRoot.adoptedStyleSheets = [baseStyles]注入（注意 Safari 16.4+、Chrome 73+ 才稳定支持） - 显式继承基础样式：
:host { font-family: inherit; color: inherit; }，否则的字体不会透入
如何让外部有限影响 shadow 内容
W3C 规范只允许两个合法出口：:host 和 ::slotted()，其余全是单向封闭。
-
:host([disabled]) { opacity: 0.5; }响应宿主元素自身属性，:host-context(.theme-dark)响应祖先（如<my-button></my-button>） -
::slotted(p) { color: var(--text-primary); }只匹配传入<slot></slot>的顶层<p></p>元素，且仅支持可继承属性（color、font、line-height、background-color） - 禁止写
::slotted(*)—— 不可靠，且违背封装原则；slot 内容的布局（margin、display、width）责任本该由使用者承担 - 想暴露主题接口？用 CSS 自定义属性：
.btn { background: var(--button-bg, #007bff); }，外部可通过my-button { --button-bg: #ff6b6b; }覆盖
第三方 CSS（如 Foundation、Font Awesome）怎么安全引入
不能把 <link rel="stylesheet"> 直接塞进 shadowRoot.innerHTML，那样会加载到全局作用域，失去隔离意义。
- 若必须用，先用
DOMParser解析 HTML 字符串，提取<style></style>标签内容，转为文本后注入<style></style>节点 - 对
@import、相对路径（url(./icon.svg)）、CSS 变量继承断裂等问题，需提前做资源代理或内联替换 - 更稳妥的做法：只提取所需图标类名或工具类，手写精简版
<style></style>，避免整包引入带来的不可控副作用 - 注意：CDN 链接中的
crossorigin和integrity属性在 shadow 内仍需保留，否则可能因 CORS 失败导致字体/图标不显示
最易被忽略的一点：Shadow DOM 不隔离 JavaScript，document、window、事件冒泡都照常穿透。所谓“完全封装”是错觉，真正可控的是样式边界和 DOM 查询范围——别指望它防住恶意脚本，也别忘了给 slot 内容留出合理的样式接管通道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
