前端面试题：Web Components

1. Web Components 的四个核心标准是什么？

• Custom Elements 自定义元素。
• Shadow DOM 封装样式和结构。
• HTML Templates 模板。
• ES Modules 作为模块化基础。

2. Shadow DOM 有什么作用？

• 使组件样式和 DOM 封装，避免外部干扰。
• 提供私有化 DOM 结构。
• 简化组件复用。

3. 如何定义一个自定义元素？

• 继承 HTMLElement。
• 使用 customElements.define() 注册。
• 实现 connectedCallback、disconnectedCallback 等生命周期钩子。

4. Web Components 与框架有什么区别？

• Web Components 是原生浏览器标准。
• 框架提供更完整的状态管理、路由、生态。
• Web Components 更适合跨框架复用组件。

5. 你如何处理 Web Components 的样式？

• Shadow DOM 提供封装样式。
• 使用 ::slotted 处理分发插槽元素样式。
• 外部样式默认不影响内部 Shadow DOM。

6. 如何与 React 或 Vue 集成 Web Components？

• React 可直接把自定义元素当作 DOM 节点使用。
• Vue 可以用 defineCustomElement 或 is 属性。
• 需要处理属性、事件和 slot 的传递。

7. Web Components 的浏览器兼容性如何？

• 现代浏览器已基本支持。
• 旧浏览器需要 polyfill。
• 常见兼容性问题包括 Shadow DOM 和 Custom Elements。

8. 面试常问的应用场景有哪些？

• 构建设计系统。
• 跨团队共享 UI 组件。
• 在多个框架间统一组件库。