WebComponents与Shadow DOM：样式隔离与Slot组合

WebComponents与Shadow DOM：样式隔离与Slot组合概览WebComponents 提供标准化组件模型；Shadow DOM 带来样式与 DOM 隔离；Slots 支持灵活内容插入。需处理事件重定向、样式注入与 SSR 兼容等实际问题。技术参数（已验证）生命周期：`connectedCallback`、`disconnectedCallback`、`attributeChangedCallback`；注册 `customElements.define`。Shadow DOM：`attachShadow({mode:"open"})`；样式隔离与事件重定向；`::part`/`::slotted` 控制外部样式暴露。插槽：`<slot name="...">` 与默认插槽；分发与命名插槽组合布局。样式注入：`adoptedStyleSheets` 与 Constructable Stylesheets 提升性能与复用；旧浏览器降级策略。SSR 与可访问性：SSR 支持有限；需提供 ARIA 与键盘交互；避免 Shadow 阻断弹窗/焦点。实战清单为组件设计明确的样式暴露边界；通过 `part` 与事件自定义保持可扩展。建立测试与可访问性清单；在构建层做 Polyfill 与降级。文档化插槽与属性/事件契约；避免破坏升级。