带给你Web Components上手指南

，让我们可以直接使用已经封装好的组件，而且在开源社区的帮助下，出现了很多的模板项目( vue-element-admin、Ant Design Pro )，能让我们快速的开始一个项目。

虽然 React、Vue 为我们的组件开发提供了便利，但是这两者在组件的开发思路上，一个是自创的 JSX 语法，一个是特有的单文件模板的语法，两者的目标都是想提供一种组件的封装方法。毕竟都有其原创的东西在里面，和我们刚开始接触的 Web 基础的 HTML、CSS、JS 的方式还是有些出入的。今天介绍的就是，通过 HTML、CSS、JS 的方式来实现自定义的组件，也是目前浏览器原生提供的方案：Web Components。

什么是 Web Components?

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

代码的复用一直都是我们追求的目标，在 JS 中可复用的代码我们可以封装成一个函数，但是对于复杂的HTML(包括相关的样式及交互逻辑)，我们一直都没有比较好的办法来进行复用。要么借助后端的模板引擎，要么借助已有框架对 DOM API 的二次封装，而 Web Components 的出现就是为了补足浏览器在这方面的能力。

如何使用 Web Components?

Web Components 中包含的几个规范，都已在 W3C 和 HTML 标准中进行了规范化，主要由三部分组成：

• Custom elements(自定义元素)：一组 JavaScript API，用来创建自定义的 HTML标签，并允许标签创建或销毁时进行一些操作;
• Shadow DOM(影子DOM)：一组 JavaScript API，用于将创建的 DOM Tree 插入到现有的元素中，且 DOM Tree 不能被外部修改，不用担心元素被其他地方影响;
• HTML templates(HTML模板)：通过<template>、<slot>、 直接在 HTML 文件中编写模板，然后通过 DOM API 获取。

Custom elements(自定义元素)

浏览器提供了一个方法：customElements.define() ， 来进行自定义标签的定义。该方法接受三个参数：

• 自定义元素的名称，一个 DOMString 标准的字符串，为了防止自定义元素的冲突，必须是一个带短横线连接的名称(e.g. custom-tag)。
• 定义自定义元素的一些行为，类似于 React、Vue 中的生命周期。
• 扩展参数(可选)，该参数类型为一个对象，且需要包含 extends 属性，用于指定创建的元素继承自哪一个内置元素(e.g. { extends: 'p' })。

下面通过一些例子，演示其用法，完整代码放到了 JS Bin 上。

（编辑：葫芦岛站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!