十分钟带你入门WebComponents

什么是 web components

那能不能基于原生的 HTML/CSS/JS 就能封装的组件规范呢？那就是 Web Components。

成都创新互联公司专业为企业提供澜沧网站建设、澜沧做网站、澜沧网站设计、澜沧网站制作等企业网站建设、网页设计与制作、澜沧企业网站模板建站服务，十年澜沧做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

Web Components 本身不是一个单独的规范，而是由一组 DOM API 和 HTML 规范所组成，用于创建可复用的自定义名字的 HTML 标签，并且可以直接在你的 Web 应用中使用。

组件的定义以及核心目标

我认为组件就是内部抽象封装了一定的逻辑功能，并暴露相关接口给外部调用。

它能够完成以下的功能：

• 复用:组件将会作为一种复用单元，被用在多处。
• 解耦:组件本身隔离了变化，组件开发者和业务开发者可以根据组件的约定各自独立开发和测试。
• 封装:组件屏蔽了内部的细节，组件的使用者可以只关心组件的属性和事件和方法。
• 抽象:组件通过属性和事件、方法等基础设施提供了一种描述​​UI​​ 的统一模式，降低了使用者学习的心智成本。

那 Web Components 怎么做到以上几点的呢？

Web Components 的核心概念

主要有以下几点：

• Custom elements（自定义元素）：一组 JavaScript API，允许您定义 custom elements 及其行为，然后可以在您的用户界面中按照需要使用它们。
• Shadow DOM（影子 DOM）：一组 JavaScript API，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
• HTML templates（HTML 模板）：