直接赋值innerHTML失效是因为Shadow DOM拒绝将字符串解析为样式入口，<style>被当文本节点不入CSSOM，<script>在全局执行致XSS，<link>仍写入主文档失去隔离；正确做法是用DOMParser解析后手动处理节点。
为什么直接写 innerHTML = '<style>...</style>' 会失效</H3>
<p>常见错误是把样式和结构混在同一个字符串里塞进 <code>shadowRoot.innerHTML
，比如：
shadowRoot.innerHTML = `<ul class="menu"><li>Home</li></ul>
<style>.menu { padding: 0; }</style>`;
这时 <style> 标签被当作文本节点解析，根本不会进入 CSSOM，后续 JS 想改 sheet.cssRules[0].style.padding 完全没反应，甚至触发 FOUC（闪白）。
必须拆成两步：先设结构，再用 DOM 方法注入样式节点。
- 始终用
document.createElement('style') + textContent + appendChild()
- 避免模板字符串插值，防止 XSS（尤其当菜单项来自用户输入时）
- 若需复用基础样式（如重置
margin、list-style），提前创建 const baseStyles = new CSSStyleSheet()，再赋给 shadowRoot.adoptedStyleSheets（注意 Safari 16.4+、Chrome 73+ 才稳定支持）
如何让外部主题 class 影响菜单内部颜色和背景
document.createElement('style') + textContent + appendChild()
margin、list-style），提前创建 const baseStyles = new CSSStyleSheet()，再赋给 shadowRoot.adoptedStyleSheets（注意 Safari 16.4+、Chrome 73+ 才稳定支持）菜单组件常需响应宿主的 .theme-dark 或 [data-theme="dark"]。不能靠全局选择器或 JS 判断 class 后手动改 style——这破坏封装且易漏更新。:host 是唯一可靠入口，它匹配宿主元素自身（即 <my-menu> 标签），浏览器会自动响应其 class 变更。
- 写
:host(.theme-dark) .menu-item { background: #333; color: #fff; }，无需监听 DOM 变化 -
:host([disabled])可控制整体禁用态，:host([expanded])控制展开/收起视觉反馈 - 禁止用
:host-context(.dark)—— 已被 Chrome/Firefox 标记为 deprecated，行为不一致 - CSS 变量可继承穿透，但必须挂载在宿主上：
<my-menu style="--menu-bg: #f8f9fa;">，内部用background-color: var(--menu-bg, #fff);
怎么安全地分发用户传入的菜单项内容
菜单内容通常由使用者通过 <slot> 注入，比如 <my-menu><li slot="item">Settings</li></my-menu>。但 <slot> 不自带样式隔离——外部 li { margin: 1em 0; } 会直接影响内部布局。
- 用
::slotted(li)重置可继承属性：::slotted(li) { margin: 0; color: inherit; font-family: inherit; } - 禁止写
::slotted(*) { all: initial; }—— 会清掉font-family和color，导致文字不可读 - 布局类属性（
display、margin、flex）不能用::slotted()控制，那是使用者的责任；组件只应约束样式继承链 - 若需强制垂直排列，应在 shadow 内部用
.menu { display: flex; flex-direction: column; }，而非试图用::slotted(li)设置display: block
事件冒泡出 Shadow DOM 的边界怎么处理
菜单项点击后，往往需要通知外部逻辑（如路由跳转、状态更新）。Shadow DOM 默认阻止事件冒泡出 boundary，但 click 这类原生事件默认 bubbles: true，却仍卡在 boundary 内。
立即学习“前端免费学习笔记（深入）”；
- 必须手动 dispatch 自定义事件：
this.dispatchEvent(new CustomEvent('select', { detail: { value: 'home' }, bubbles: true, composed: true })) -
composed: true是关键——它允许事件穿透 shadow boundary，被外部document.addEventListener('select', ...)捕获 - 避免直接暴露内部
<li>元素，也不要用el.shadowRoot.querySelector('.menu-item')绑定事件——这耦合过深，违反封装原则 - 如果菜单支持键盘导航（
ArrowDown、Enter），事件也需同样composed: true，否则外部无法接管焦点管理
attachShadow({ mode: 'open' })，而是决定哪些样式该透传、哪些该锁死，以及什么时候该让 slot 内容“自己负责布局”。这些边界感，比语法本身更影响组件寿命。 
