Shadow DOM 样式隔离必须通过 attachShadow() 创建真实边界，否则 scoped 属性、BEM 命名和 !important 均无效；浏览器在样式计算阶段直接跳过跨 boundary 匹配，外部 CSS 根本不可见，唯一合法穿透方式是 :host 和 ::slotted()。
Shadow DOM 实现 CSS 样式隔离不是“加个属性就能封住”，而是必须用 attachShadow() 创建真实边界，否则任何命名约定（BEM）、scoped 属性或 !important 都无效——浏览器在样式计算阶段就跳过跨 boundary 匹配，根本看不见外部规则。
为什么 scoped 和 BEM 类名完全不生效
Chrome 120+、Firefox 115+ 已彻底移除 scoped 属性支持，它从未真正实现隔离；BEM 类名如 .card__title 只是命名习惯，h1 { color: red } 这类全局规则仍能穿透覆盖。根本原因不是优先级低，是 Shadow DOM 的隔离发生在样式计算早期：外部 CSS 规则压根不进入该 shadow tree 的 CSSOM，!important 在这里没有作用域可比。
如何正确创建 shadow root 并注入样式
必须调用 attachShadow() 获取 ShadowRoot 对象，再用标准 DOM 方法注入样式节点——不能靠字符串拼接。
- 始终用
{ mode: 'open' }：选'closed'会让element.shadowRoot返回null，DevTools 无法 inspect，调试几乎抓瞎 - 禁止写
shadowRoot.innerHTML = `<style>...</style>`：<style></style>被当普通 HTML 解析，不进 CSSOM，后续 JS 动态改sheet.cssRules完全失效 - 推荐方式：
const style = document.createElement('style'); style.textContent = '.btn { color: blue; }'; shadowRoot.appendChild(style); - 若需复用样式，可用
const baseStyles = new CSSStyleSheet(); shadowRoot.adoptedStyleSheets = [baseStyles];（注意 Safari 16.4+、Chrome 73+ 才稳定）
:host 和 ::slotted() 是唯一合法穿透方式
W3C 规范只保留这两个钩子作为跨 boundary 出口，其余所有穿透语法（/deep/、::ng-deep、>>）已在 Chrome 120+、Firefox 115+ 中移除，继续用等于放弃兼容性。
立即学习“前端免费学习笔记（深入）”；
-
:host只匹配宿主元素自身（即<my-button></my-button>这个标签），可用于响应属性：:host([disabled]) { opacity: 0.5; }；想响应，必须用:host-context(.theme-dark)，而非:host(.dark) -
::slotted(p)只匹配传入<slot></slot>的顶层<p></p>元素，且仅支持可继承属性（color、font-family、line-height、background-color）；禁止设margin、display、width - 别写
::slotted(*)：行为不可靠，违背封装原则，slot 内容的布局责任本该由使用者承担
容易被忽略的继承与第三方样式问题
用户代理样式（如 <input> 的默认边框）会覆盖 inherit，必须显式重置；第三方 CSS（Bootstrap、Font Awesome）绝不能直接塞 <link rel="stylesheet"> 到 shadowRoot.innerHTML，否则加载到全局，彻底破坏隔离。
- 字体、颜色等基础继承需手动声明：
:host { font-family: inherit; color: inherit; } - 安全注入第三方样式只能走预处理 +
CSSStyleSheet：用DOMParser提取 CSS 文本，转为CSSStyleSheet实例，再通过adoptedStyleSheets注入 - 相对路径（
url(./img.png)）、@import、CSS 变量继承链断裂等问题，需提前做资源代理或内联替换
真正难的不是写对 attachShadow()，而是想清楚哪些样式该暴露（用 :host 或自定义属性）、哪些该锁死——边界画在哪，比怎么画更关键。
