Web Components 是一系列仍在制定中的现代标准。允许创建可以重用的定制元素，可以在 Web 应用中使用它们。

实际上与现在的主流前端框架 Vue / React 的组件概念相似。

🍞 相关文档：

• Web Components | MDN (opens new window)
• WEBCOMPONENTS.ORG (opens new window)

组件化架构概念

在开发复杂的应用原则中，不要让应用的开发变得复杂。如果某一个部分变得复杂了，就将其拆分为简单的部分，然后再组合起来 —— 将复杂的事情简单化。

🌰 例子：

• 将用户界面拆分为若干个组件，每个组件占有相应的位置，执行其明确的任务，并且于其他组件区分开。
• 组件也可以包含子组件，比如消息组件可能是更高阶组件「消息列表」的子组件。可点击的用户头像可能也是一个组件。

如何划分一个组件：

• 通常情况下，如果一个独立的可视化实体，可以描述其可以做什么，如何在页面上交互，那么就可以将其划分为一个组件。

  例如，页面上存在几个模块，每个模块都有自己的角色，所以可以将它们划分为一个组件。

一个组件的内容包括：

• JavaScript 类；
• DOM 结构，并且拥有自己的类管理，无法被外部代码操作（封装的原则）；
• CSS 样式，作用在该组件上。
• API：事件、类方法，让组件与其他组件交互。

现代的浏览器原生支持 Web Components：

• Custom Elememts：自定义 HTML 元素；
• Shadow DOM：为组件创建内部 DOM，外部不可见；
• CSS Scoping： 用于组件内部的范围样式；
• Event retargeting：组件的事件相关。