作者：Pascal Schilp
原文链接：Web Components: from zero to hero
Web Components: 入门到精通
一个编写原生 Web Components 的教程
- 什么是 Web Components？
- 组件生命周期
- 编写我们的 to-do 应用
- 设置 properties
- 设置 attributes
- 将 properties 映射到 attributes
- 事件
- 浏览器支持以及 polyfill
- 包装
Web Components 现在有了越来越大的推动力。随着 Edge 团队宣布部署 Custom Elements 和 Shadow DOM，所有的主流浏览器都已经原生支持 Web Components。像 Github，Netflix，Youtube 和 ING 等甚至已经在生产环境中使用了 Web Components！赞！不过，很让人惊讶的是，这些成功的大公司中没有一个做过（猜的没错） to-do 应用！
因此，今天我们要做一个 to-do 应用，因为世界上还没几个 to-do 应用。你可以在这里先预览一下我们要做的东西。
在开始之前，我要先写点免责声明，这篇博文只是为了让你对 Web Components 的基础概念有个大概的了解。Web Components 是非常底层的技术，并不建议在没有辅助库的情况下编写完整的应用，也不应该拿它跟其他成熟的框架进行比较。
什么是 Web Components？
先说重点：Web Components 是一系列编写具有模块化、可重用和封装性的 HTML 元素的规范。最棒的地方在于：由于它是基于 web 标准，我们无需安装任何框架或库。现在你就可以用纯 JavaScript 编写 Web Components！
不过呢，在我们下手之前，让我们先来看看编写 Web Components 的县官规范。
自定义元素
Custom Elements api 允许我们编写自定义的 DOM 元素。通过这个 api，我们可以定义一个自定义元素，并通知解析器如何正确的构建元素及如何应对此类元素的变动。你是否想过创建自己的元素，比如
Shadow DOM
Shadow DOM 给了我们封装组件样式和标记的能力。它是一个 DOM 元素的子 DOM 树，可以确保我们的组件样式不会泄漏到外部作用域，或是被外部作用域的样式所影响。是模块化的绝配。
ES 模块
ES 模块规范定义了标准化、模块化、高效率的引用和重用 JS 文件的方式。
HTML Templates
HTML 现在我们已经知道了 Web Components 利用了哪些 Web 规范，我们来看一下自定义元素的生命周期。别急，别急，我们马上就要开始写代码了！ 我们来看一下自定义元素的生命周期。以下面的元素为例： 在这个例子中，每当 标签允许我们创建可重用的 DOM 块。在 template 内部，脚本不会执行，图片不会加载，样式和标签也不会渲染。在这个 template 被激活之前它甚至会被当作不存在在 document 中。HTML templates 非常棒，因为不管我们这个自定义元素有多少实例，它们用的都是同一个 template。
组件的生命周期
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25class MyElement extends HTMLElement {
constructor() {
// 务必先调用 super()
super();
console.log('constructed!');
}
connectedCallback() {
console.log('connected!');
}
disconnectedCallback() {
console.log('disconnected!');
}
attributeChangedCallback(name, oldVal, newVal) {
console.log(`Attribute: ${name} changed!`);
}
adoptedCallback() {
console.log('adopted!');
}
}
window.customElements.define('my-element', MyElement);constructor()
constructor 会在元素创建后而尚未被附加到文档上之前被调用。我们用 constructor 来设置初始状态、事件监听以及 shadow DOM。connectCallback()
connectCallback 会在元素被添加到 DOM 中后被调用。此时非常适合执行初始化代码，比如获取数据或是设置默认属性。disconnectedCallback()
disconnectedCallback() 会在元素从 DOM 中被移除后调用。大扫除时间！我们可以利用 disconnectedCallback 来移除事件监听器或取消定时循环事件。attributeChangedCallback(name, oldValue, newBalue)
attributeChangedCallback 会在元素的受监的控属性变动时被调用。我们可以通过设置 observedAttributes getter 来监控某个元素属性，像这样：1
2
3static get observedAttributes() {
return ['my-attr'];
}my-attr 属性发生变化，attributeChangedCallback 就会执行。本文后面将会详细讲解。