Shadow DOM 样式隔离依赖浏览器解析阶段的强制边界，外部CSS不进入shadowRoot的CSSOM，!important无效因未被解析；必须用attachShadow()创建真实边界，禁用innerHTML注入style，正确使用:host和::slotted()，adoptedStyleSheets动态注入样式，注意继承与兼容性限制。
Shadow DOM 样式隔离不是“加个属性就能成”，而是浏览器在解析阶段就强制切断跨 boundary 匹配——外部 CSS 压根不进 shadowRoot 的 CSSOM，!important 无效不是因为权重低，是根本没被看到。
必须用 attachShadow() 创建真实边界，不能靠字符串拼接
常见错误是直接写 shadowRoot.innerHTML = `<div></div><style>.box { color: red; }</style>`。这样 <style> 被当普通 HTML 解析，不进 CSSOM，后续 JS 修改规则（如 sheet.cssRules[0].style.color = 'blue'）完全失效，还可能触发 FOUC。
- 正确做法：先设结构，再用 DOM 方法注入样式节点
- 始终用
{ mode: 'open' }——'closed'会让element.shadowRoot返回null，DevTools 无法 inspect，调试基本瘫痪 - 在自定义元素的
constructor中检查this.shadowRoot是否已存在，避免重复调用attachShadow()报错 - 禁止在
connectedCallback里反复挂载，每次插入都会触发，必然报错
:host 和 ::slotted() 是唯一合法的跨边界样式钩子
Chrome 120+、Firefox 115+ 已彻底移除 /deep/、::ng-deep、>>> 等穿透语法。继续使用等于主动放弃现代浏览器兼容性。
-
:host只匹配宿主元素自身（比如<my-button>这个标签），不能写:host div去选内部子元素 -
:host([disabled])有效；:host-context(.dark)才能检测祖先链是否含.dark类；:host(.dark)是常见误用，它只查宿主自身有没有 class -
::slotted(p)只匹配传入<slot>的顶层子节点（不递归），且仅支持可继承属性：color、font、line-height、background-color等 - 禁止写
::slotted(*)或:host ::slotted(*)—— 行为不可靠，违背 slot 设计本意，布局责任应由使用者承担
第三方 CSS（如 Bootstrap、Font Awesome）不能直接塞进 shadowRoot
把 <link rel="stylesheet"> 直接写进 shadowRoot.innerHTML，会加载到全局作用域，完全失去隔离意义。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：用
CSSStyleSheet实例 +shadowRoot.adoptedStyleSheets动态注入（Chrome 73+ / Safari 16.4+ 支持） - 对远程
<link>，需主应用代理请求，返回带 scope 处理的 CSS 文本，再构造CSSStyleSheet - 注意
adoptedStyleSheets不处理@import、相对路径（如url(./img.png)）、CSS 变量继承断裂等问题 - 禁用
innerHTML = '<style></style>'注入方式 —— style 节点不进 CSSOM，动态更新失效
最容易被忽略的是继承陷阱：用户代理样式（如 <a> 默认蓝色）会覆盖从宿主继承的 color，必须显式写 color: inherit 才能穿透继承链。Shadow DOM 不是“完全隔离”，它只隔离样式和 DOM 查询，JS 仍共享全局执行环境，事件冒泡、document、window 都照常穿透。
