Web Components 是一套原生浏览器 API，用于构建可重用、封装的自定义 HTML 元素——与框架无关且基于标准。三种技术相结合：
<template>, <slot>) — 惰性、可重用的标记。 {
() {
shadow = .({ : });
shadow. = ;
}
}
customElements.(, );
一个包含详细解答的 IT 面试题库——从初级到高级。
捐赠<user-card name="Ann">Extra content goes in the slot</user-card>
Shadow root 内的样式是作用域化的 — 页面的 CSS 无法进入，组件的 CSS 也无法泄露出去。这从原生角度解决了全局 CSS 问题：
/* page CSS */ h2 { color: red; } /* does NOT affect the <h2> inside user-card */
connectedCallback() // added to DOM
disconnectedCallback() // removed from DOM (cleanup)
attributeChangedCallback(name, old, val) // an observed attribute changed
static get observedAttributes() { return ["name"]; }
Web Components 让你能够构建可重用的小部件，可以在任何框架中工作（或不使用框架），具有真正的样式/DOM 封装 — 非常适合跨使用不同技术栈的团队共享的设计系统和微前端。
这是 Shoelace 这样的库如何交付与框架无关的组件的方式。
Trade-offs（冗长的 API、SSR/样式复杂性）意味着应用开发者通常仍然更倾向于 React/Vue，但该平台原语功能强大且基于标准。