谷歌WebComponents由这四种技术组成对应的HTML元素的接口

自从掌握了 Chrome 浏览器以来，Google 一直在推动浏览器的原生组件 Web Components API。与第三方框架相比，原生组件简单、直接、直观伪元素选择器link，不需要加载任何外部模块，代码量少。目前，它仍在开发中，但已经可用于生产环境。

基本概念

Web Components 由这四种技术组成

对应接口

1、四个新的 HTML 元素： , , ,

2、与新元素相关的API接口：

3、HTMLLinkElement 接口和元素的扩展

4、注册新元素的接口：

5、自定义元素的原型可以添加新的生命周期回调

为 6、 元素的默认样式添加一个新的 CSS 伪类（pseudo-classes）

: 未解决。

7、阴影 DOM：

Shadow DOM 为 Web 组件中的 DOM 和 CSS 提供了封装。Shadow DOM 将这些东西与主文档的 DOM 分开。您还可以在 Web 组件之外使用 Shadow DOM 本身。

为什么要将页面上的某些代码与其他代码分开？原因之一是在没有组织良好的 CSS 的大型网站中，导航样式可能会“泄漏”到它们不应该出现的地方，例如主要内容区域，反之亦然。随着站点和应用程序的扩展，这样的事情是不可避免的。

8、Event接口的扩展：Event.path

9、Document接口的扩展

10、Web 组件的风格：

自定义元素

创建您自己的自定义 HTML 元素，这些元素可以拥有自己的脚本行为和 CSS 样式。

自定义元素的一个优点是它们的生命周期反应性，它允许将行为附加到新元素“生命周期”的不同部分。

启用自定义元素的关键是 Document.registerElement() 方法，它向浏览器注册一个新元素，默认使用 HTMLElement 接口（如果你创建了类似的标签，但不注册它，它将使用HTMLUnknownElement 接口。您也可以在诸如此类的原生元素之上创建自定义元素，但是您不能使用自定义标签名称伪元素选择器link，例如，使用此语法）。

生命周期回调

自定义元素可以使用以下生命周期回调函数：

示例教程

上面已经介绍了 Web Components 的一些基本概念。接下来，我们将提供一些示例来匹配这些基本概念。

下图是一张用户卡。

本文演示了如何将此卡片编写为 Web 组件组件。只需将以下代码插入网页，即可显示用户卡。

注意：此自定义 HTML 标记称为自定义元素。根据规范，自定义元素的名称必须包含连字符以将其与原生 HTML 元素区分开来。因此，不能写。

customElements.define()

自定义元素需要使用 JavaScript 定义一个类，并且都是这个类的实例。

class UserCard extends HTMLElement {
 constructor() {
 super();
 }
}

在上面的代码中，UserCard 是自定义元素的类。请注意，该类的父类是 HTMLElement，因此继承了 HTML 元素的属性。

接下来，使用浏览器的原生 customElements.define() 方法告诉浏览器该元素与此类关联。

window.customElements.define('user-card', UserCard);

自定义元素的内容

自定义元素当前为空，该元素的内容在下面的类中给出。

上面代码的最后一行，this.append()的this代表了自定义元素实例。

经过这一步，自定义元素内部的DOM结构已经生成。

模板标签

使用 JavaScript 写上一节的 DOM 结构是很麻烦的。Web Components API 提供标签，类似于 Vue 编写组件的方式，您可以在其中使用 HTML 来定义 DOM。

然后，重写自定义元素的类来加载自定义元素

上面的代码中，在获取到节点后，克隆了它的所有子元素。这是因为自定义元素可能有多个实例，而这个模板是为其他实例保留的，所以它的子元素不能直接移动。

至此，完整代码如下

添加样式

自定义元素还没有样式，您可以为其分配全局样式，如下所示。

user-card {
 /* ... */
}

但是组件的样式应该用代码封装，只对自定义元素生效，不影响外部全局样式。因此，您可以在其中编写样式，类似于 scss 中使用的 scoped 标签。

注意：在上面的代码中，样式中的 :host 伪类是指自定义元素本身。

自定义元素的参数

内容现在设置在里面。对于组件复用，我们想改成传参的形式

然后代码应该相应地修改

最后，更改类的代码并将参数添加到自定义元素

影子 DOM

我们不希望用户能够看到内部代码，Web Component 允许隐藏内部代码，这就是所谓的 Shadow DOM，即这部分 DOM 默认与外部 DOM 是隔离的，任何内部代码不能影响外部代码。

自定义元素的 this.attachShadow() 方法打开了 Shadow DOM，详情见下面的代码。

在上面的代码中，this.attachShadow() 方法的参数 { mode: ‘closed’ } 表示 Shadow DOM 已关闭，不允许外部访问。

至此，Web Component组件就完成了，完整的代码可以在这里访问。可以看到，整个过程还是很简单的，不像第三方框架有复杂的API。

组件的扩展

在以前的基础上，可以扩展组件。

(1）与用户互动

用户卡是一个静态组件。如果你想和用户进行交互，在类中监听各种事件是非常简单的。

this.$button = shadow.querySelector('button');
this.$button.addEventListener('click', () => {
 // do something
});

(2）组件封装

在上面的例子中，与网页代码一起，实际上可以通过脚本注入到网页中。这样就可以将JavaScript脚本封装成一个JS文件，成为一个独立的组件文件。只要网页加载这个脚本，组件就可以使用

你以为这才刚出来吗，不，已经有完整的组件库了

与地址：

#/自述文件

链接地址：