2024-9-20 web components 是什么？

[iolh]

参考资料：

1. https://developer.mozilla.org/en-US/docs/Web/API/Web_components
2. https://kinsta.com/blog/web-components/
3. https://www.albertaz.com/blog/web-components-ststus
4. https://www.zhoulujun.cn/html/webfront/SGML/htmlBase/2012_0823_9020.html

[iolh]

Web Components

Web Components 是一种使用封装的、可重用的 HTML 标签、样式和行为来创建自定义元素的 Web 技术。

Web Components 自己本身不是一个规范，而是一套整体技术，包含下面3个独立规范：

• Custom Elements：允许开发者定义自己的 HTML 标签（考虑SEO，还是语义化为好）。
• Shadow DOM：用于封装样式和标记，不受外部 DOM 影响——天然自带Scope能力（本质是一组 JS API）。
• HTML Templates (<template>和 <slot>)：声明式的重用 HTML 代码片段。
• HTML Imports（已废弃)，HTML Imports 曾用于引入和使用 HTML 文档的片段，但该技术已被废弃，现代 Web 组件技术通常通过模块化 JavaScript 或 ES6 模块来替代。