Shadow DOM 仅提供访问隔离而非安全性，closed 模式下 shadowRoot 恒为 null 是规范设计；须用 DOM 方法注入样式、显式暴露 API、合理使用 :host 和 ::slotted() 控制透传，封装性依赖主动约束而非自动保障。
Shadow DOM 本身不提供“安全性”，它只提供访问隔离；真正提升封装性靠的是正确使用 attachShadow、:host 和 ::slotted()，而不是指望它自动防 XSS 或阻止 DevTools 查看。
closed 模式下 shadowRoot 返回 null 是设计，不是 bug
调用 element.attachShadow({ mode: 'closed' }) 后，element.shadowRoot 永远是 null。这不是浏览器缺陷，而是规范强制行为——它直接切断所有标准 JS 访问路径。
- 常见错误：写
console.log(el.shadowRoot.querySelector('input'))，结果报Cannot read property 'querySelector' of null - 调试时 DevTools 不显示 shadow tree 节点（即使开了 “Show user agent shadow DOM”）
- 组件作者必须显式暴露方法（如
focus()、reset()）或事件（设composed: true）供外部调用 -
mode不影响生命周期钩子：connectedCallback和attributeChangedCallback在open和closed下都照常触发
innerHTML = '<style>...</style>' 会失效，必须用 DOM 方法注入
把 <style> 标签拼在字符串里塞进 shadowRoot.innerHTML，样式不会生效——浏览器把它当普通 HTML 解析，不进入 CSSOM，JS 也无法通过 sheet.cssRules 修改。
- 正确做法：用
document.createElement('style')+textContent+appendChild() - 避免模板字符串插值：
`<style>.btn { color: ${theme}; }</style>`易引发 XSS，且无法动态更新 - 复用公共样式推荐
CSSStyleSheet+adoptedStyleSheets（注意 Safari 16.4+、Chrome 73+ 支持）
:host 和 ::slotted() 是唯一可控的“透传通道”
外部样式无法穿透 Shadow DOM，但基础继承属性（如 font-family、color）默认会透入；要控制透传范围，只能靠这两个伪类，其余方式已被主流浏览器废弃或行为不一致。
立即学习“前端免费学习笔记（深入）”；
-
:host匹配宿主元素自身，可用于响应外部 class：:host(.theme-dark) { --bg: #1a1a1a; } -
::slotted(p)只影响传入<slot>的顶层<p>元素，且仅支持可继承属性 - 禁用
::slotted(*)或:host ::slotted(*)：部分浏览器解析不一致，且违背封装原则 - slot 内容的布局责任不在组件内——若用户传入
<div style="margin: 20px">，你无法重置它的 margin
盒模型没变，封装性靠主动约束
Shadow DOM 不改变 box-sizing、width、padding 等盒模型规则，内部元素仍默认 content-box。所谓“封装性提升”，其实是开发者在 shadow 内部主动统一约束的结果。
- 必须手动设
:host, :host * { box-sizing: border-box; }，否则子元素 padding 会撑开容器 -
:host上慎用margin：外部调用者可能已设 margin，叠加导致间距失控 - slot 内容若带
display: block且无box-sizing，其 padding 会撑高组件——:host无法重置它，只能靠文档约定或上游规范 -
:host-context()匹配外部环境时，font-size或line-height会影响 em/ex 单位计算，导致尺寸错位
真正容易被忽略的点是：closed 模式防不住 DevTools 查看、事件监听或 CSS 注入；它只防常规 JS 访问。如果你需要强安全边界，得组合 composed: false、:host 控制、<slot> 精确开放，以及 HTML 输入净化。
