标准答案
- customElements.define 可以注册自定义元素，让浏览器识别新的标签。
- Shadow DOM 提供独立 DOM 子树和样式封装，减少外部样式影响组件内部。
- slot 是内容分发机制，让使用者把内容传入组件指定位置。
- Web Components 适合跨框架组件、设计系统基础组件和需要原生封装的场景。
- 它不能替代所有框架能力，状态管理、数据流、服务端渲染和开发体验仍要结合项目判断。
题目解析
这题要把三个概念分别说清楚：标签注册、封装边界、内容分发。
Shadow DOM 的样式隔离有收益，也会带来主题覆盖、测试选择器和可访问性检查的额外成本。
代码示例
自定义元素可以挂载 Shadow DOM 并暴露 slot。
HTML
<user-card>
<span slot="name">Ada</span>
</user-card>
<script>
customElements.define('user-card', class extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' }).innerHTML =
'<article><slot name="name"></slot></article>'
}
})
</script>常见误区
- 把 Web Components 理解成某个框架的组件语法。
- 认为 Shadow DOM 会隔离所有问题，忽略主题、弹层和可访问性穿透。
- 跨框架复用时没有设计属性、事件和表单集成方式。