用途：提供基于标准的组件模型参考，用于编写可跨框架（React、Vue、Solid 或无框架）分发的 UI 基础组件，也可嵌入 CMS 或第三方站点。
主要能力：自定义元素（customElements.define）、Shadow DOM（attachShadow）、slot 分发、声明式 Shadow DOM（<template shadowrootmode>）、表单关联自定义元素（ElementInternals）。资料给出各特性的 Baseline 状态：自定义元素与 Shadow DOM 为 Widely Available，声明式 Shadow DOM 为 Newly Available（2024），ElementInternals 自 2023 年 3 月起 Widely Available，Scoped Custom Element Registries 为 Limited/experimental。
使用方式：自定义元素名必须含连字符，如 <my-card>，<mycard> 会被拒绝。依赖 attributeChangedCallback 时必须声明 static get observedAttributes()。构造函数中不要读写子节点、父节点或宿主属性，应在 connectedCallback 或 attributeChangedCallback 中处理。表单输入需 static formAssociated = true 并调用 this.internals.setFormValue(value)。若已存在 shadowRoot（如声明式 Shadow DOM 创建），不要重复 attachShadow。
适用场景：需要跨框架复用、可嵌入第三方站点、需服务端渲染首屏的组件。若组件仅用于单一框架内部，资料建议使用框架组件。
限制：不涵盖框架集成（React refs、Vue v-model、Solid 绑定）、Lit/Stencil 等生成自定义元素的编译器、TypeScript 装饰器，以及 modal/toast/drawer 等组件级模板。Shadow DOM 不是 XSS 边界，禁止将用户内容用 innerHTML 注入，需消毒或使用 textContent 与 DOM API。closed 模式默认不推荐，除非有书面理由。