Declarative Shadow DOM 与可组合组件封装实践

概述Declarative Shadow DOM 允许在 HTML 中以声明式方式定义组件的 shadow root，支持 SSR 直出与样式封装，降低客户端初始化成本并提升组件复用与可访问性。关键参数/概念`<template shadowrootmode="open">`: 声明式定义 shadow root。`slot`：组合与内容分发，保持可访问性语义。SSR 与 hydration：减少客户端创建开销。实践/示例声明式组件结构：<user-card> <template shadowrootmode="open"> <style> :host { display: block; } .name { font-weight: 600; } </style> <div class="name"><slot name="name"></slot></div> <div class="info"><slot name="info"></slot></div> </template> </user-card> <user-card> <span slot="name">Ada</span> <span slot="info">Engineer</span> </user-card> 与自定义元素协作（可选）：class UserCard extends HTMLElement {} customElements.define('user-card', UserCard); 验证方法在支持 Declarative Shadow DOM 的浏览器中直接渲染并检查封装样式与 slot 分发。在不支持环境下验证回退（可通过服务器端注入 polyfill 或在客户端升级为命令式创建）。使用无障碍工具检查语义结构与可聚焦元素的可访问性。注意事项优先保持组件内部的语义标签与可访问性属性，避免仅用 div 包裹。样式封装需避免过度依赖全局变量，提供明确定制接口（CSS Vars/parts）。与框架集成时，避免重复 hydration 或样式重注入导致闪烁。