如何利用HTML Shadow DOM实现封装良好的菜单组件-html教程-PHP中文网

直接赋值innerhtml失效是因为shadow dom拒绝将字符串解析为样式入口，被当文本节点不入cssom，在全局执行致xss，仍写入主文档失去隔离；正确做法是用domparser解析后手动处理节点。

如何利用html shadow dom实现封装良好的菜单组件

为什么直接写

innerHTML = '<style>...</style>' 会失效

常见错误是把样式和结构混在同一个字符串里塞进 shadowRoot.innerHTML，比如：<br><code>shadowRoot.innerHTML = `<ul class="menu"><li>Home</li></ul> <style>.menu { padding: 0; }</style>`;
这时 <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 影响菜单内部颜色和背景

菜单组件常需响应宿主的 .theme-dark 或 [data-theme="dark"]。不能靠全局选择器或 JS 判断 class 后手动改 style——这破坏封装且易漏更新。
:host 是唯一可靠入口，它匹配宿主元素自身（即 <my-menu></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;"></my-menu>，内部用 background-color: var(--menu-bg, #fff);

怎么安全地分发用户传入的菜单项内容

菜单内容通常由使用者通过 <slot></slot> 注入，比如 <my-menu><li slot="item">Settings</li></my-menu>。但 <slot></slot> 不自带样式隔离——外部 li { margin: 1em 0; } 会直接影响内部布局。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

用 ::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，否则外部无法接管焦点管理