web-components

组件是前端的发展方向，现在流行的 React 和 Vue 都是组件框架。

谷歌公司由于掌握了 Chrome 浏览器，一直在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小。目前，它还在不断发展，已经可用于生产环境。

Web Components API 内容很多，本篇博客不是全面的教程，只是一个简单演示，大家可以看一下怎么用它开发组件。

✨ 自定义元素
下图是一个用户卡片。
img
本文演示如何把这个卡片，写成 Web Components 组件。戳这里查看最后的完整代码。

网页只要插入下面的代码，就会显示用户卡片。

这种自定义的 HTML 标签，称为自定义元素（custom element）。根据规范，自定义元素的名称必须包含连词线，用与区别原生的 HTML 元素。所以，不能写成。

✨ customElements.define()
自定义元素需要使用 JavaScript 定义一个类，所有都会是这个类的实例。

class UserCard extends HTMLElement {
constructor() {
super();
}
}
上面代码中，UserCard就是自定义元素的类。注意，这个类的父类是HTMLElement，因此继承了 HTML 元素的特性。

接着，使用浏览器原生的customElements.define()方法，告诉浏览器元素与这个类关联。

window.customElements.define(‘user-card’, UserCard);
✨ 自定义元素的内容
自定义元素目前还是空的，下面在类里面给出这个元素的内容。

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

var image = document.createElement('img');
image.src = 'http://b-ssl.duitang.com/uploads/item/201709/18/20170918154609_MZz3U.jpeg';
image.classList.add('image');

var container = document.createElement('div');
container.classList.add('container');

var name = document.createElement('p');
name.classList.add('name');
name.innerText = 'User Name';

var email = document.createElement('p');
email.classList.add('email');
email.innerText = 'yourmail@email.com';

var button = document.createElement('button');
button.classList.add('button');
button.innerText = 'Follow';

container.append(name, email, button);
this.append(image, container);

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

完成这一步以后，自定义元素内部的 DOM 结构就已经生成了。

✨

var templateElem = document.getElementById('userCardTemplate');
var content = templateElem.content.cloneNode(true);
this.appendChild(content);

}
}
上面代码中，获取

到这一步为止，完整的代码如下。

✨ 添加样式自定义元素还没有样式，可以给它指定全局样式，比如下面这样。

user-card {
/* … */
}
但是，组件的样式应该与代码封装在一起，只对自定义元素生效，不影响外部的全局样式。所以，可以把样式写在

上面代码中，