【译】Web Components简介

本文翻译自：https://css-tricks.com/an-int...

本文首发于公众号：符合预期的CoyPan

前端开发正在以惊人的速度发展。曾经的前端开发，技术栈都是很简单的，如今却越来越复杂。这一点从无数的文章、教程和Twitter上就可以看出来。在本文中，我将讨论为什么Web Component是一个很好的工具，可以在不使用复杂框架或构建步骤的情况下提供高质量的用户体验，而且不存在过时的风险。在这个由五部分组成的系列的后续文章中，我们将深入研究每个规范。

本系列假设您基本了解HTML、CSS和JavaScript。如果您在其中一个领域感到软弱，不用担心，构建自定义元素实际上简化了许多前端开发中的复杂性。

系列文章：

An Introduction to Web Components (本文)

Crafting Reusable HTML Templates

Creating a Custom Element from Scratch

Encapsulating Style and Structure with Shadow DOM

Advanced Tooling for Web Components

到底什么是Web Components

Web Components 由三种技术组成。这三种技术会一起使用。

1. Custome Elements。自定义元素十分简单，他们都是合法的HTML元素，拥有自定义的模板，表现以及标签名(例如：<one-dialog>)。可以通过一系列的JavaScript API来创建自定义元素。自定义元素是在标准HTML规范中定义的。
2. Shadow DOM。像一个Iframe一样，可以隔离CSS和JavaScript。这是在标准DOM规范中定义的。
3. HTML templates。用户在HTML中定义的模板，只有调用的时候才会被渲染。<template>标签是在标准HTML规范中定义的。

上述三种技术组成了Web Components规范。

HTML Modules 有可能会成为第四种技术。但是四大浏览器都还没有实现HTML Modules。Chrome团队已经声明将在未来的版本中实现HTML Modules

Web Components 在目前所有的主流浏览中都是可以使用的，除了微软的Edge和IE11，但是也有polyfill可以使用。

将上述的三种技术称为Web Components在技术上来说是准确的，Web Components这个术语本身也有一些超载。因此，每种技术都可以独立使用或与其他技术结合使用。换句话说，它们并不相互排斥。

让我们快速看一下上述三种技术。我们将在其他文章中，深入了解他们。

Custome elements

就像名字所显示的那样，custome elements就是HTML元素，比如<div> 、<section>、<article>，但是我们通过浏览器的API自己给元素命名。自定义元素与标准HTML元素（尖括号中的名称）一样，只是它们中总是有一个破折号，如<news-slider>或<bacon-cheesburger>。更进一步，浏览器厂商们都已经承诺不会再新增带有破折号的内置元素，避免和自定义元素产生冲突。

自定义元素包含自己的语义、行为、标记，并且可以跨框架和浏览器共享。

示例可以参考这里：

https://codepen.io/calebdwill...

在这个例子中，我们定义了我们自己的HTML元素<my-component>。不可否认的是，这个元素做的事情并不多，但是这就是最基本的自定义元素构建方法。所有的自定义元素都必须以某种方式上继承HTMLElement，这样才能在浏览器上注册上该元素。

自定义元素不依赖与第三方框架。浏览器厂商们正致力于规范的向后兼容性，不过都保证只要按照规范编写的组件都不会受到API大改的影响。更重要的是，这些自定义元素在当今的主流框架(Angular、React、Vue)中，只需要稍做修改，就可以做到开箱即用。

Shadow DOM

Shadow DOM是对DOM的一个封装。这使得作者能够有效地将DOM片段彼此隔离开来，包括任何可以用作CSS选择器的东西以及与之关联的样式。通常情况下，document范围内的内容都被称为light DOM，shadow root中的内容被称为shadow DOM。

当我们使用light DOM的时候，我们可以通过document.querySelector('selector')来选中某个DOM，或者通过element.querySelector('selector')来获取每个元素的子元素。同样的，shadow root的子元素可以通过shadowRoot.querySelector来获取，这里的shadowRoot是一个document fragment。不同的地方是，shadow root的子元素无法在light dom中被选中。例如，如果我们的shadow root中有一个<button>，使用shadowRoot.querySelector('button')可以得到我们的button，但是调用document的querySelector就取不到这个button，因为这个button属于不同的DocumentOrShadowRoot实例。样式选择器也是一样的。

从某种意义上来说，shadow dom有点像一个iframe，其中的内容与document的其他部分隔开了。不过，当我们创建一个shadow root的时候，我们仍然可以完全控制页面中这部分的内容，只是说需要在一定的作用域下。这就是我们所说的封装。

如果你曾经写过一个重用相同的id或者依赖CSS-in-JS工具，CSS命名策略(比如BEM)的组件，shadow dom或许提升你的开发体验。

想象一下如下的场景：

<div>
  <div id="example">
    <!-- Pseudo-code used to designate a shadow root -->
    <#shadow-root>
      <style>
      button {
        background: tomato;
        color: white;
      }
      </style>
      <button id="button">This will use the CSS background tomato</button>
    </#shadow-root>
  </div>
  <button id="button">Not tomato</button>
</div>

除了<#shadow-root>的伪代码(没有HTML元素，用来分割shadow的边界)，HTML是完全合法的。为了实现上面的HTML，我们需要运行下面的代码：

const shadowRoot = document.getElementById('example').attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `<style>
button {
  color: tomato;
}
</style>
<button id="button">This will use the CSS color tomato <slot></slot></button>`;

shadow root也可以使用<slot>元素来从其内部的文档内容中包含内容。使用slot可以把外部文档中的用户内容放到shadow root目录中的指定位置。

示例可以参考这里：

https://codepen.io/calebdwill...

HTML templates

适当命名的HTML<template>元素允许我们在正常HTML流中消除代码的可重用模板。这些模板不会立即被渲染，但可以在以后使用。

<template id="book-template">
  <li><span class="title"></span> &mdash; <span class="author"></span></li>
</template>

<ul id="books"></ul>

上面的例子不会渲染任何的东西，直到我们使用script操作了这个模板，实例化代码并告诉浏览器如何操作它。

const fragment = document.getElementById('book-template');
const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
  { title: 'A Farewell to Arms', author: 'Ernest Hemingway' },
  { title: 'Catch 22', author: 'Joseph Heller' }
];

books.forEach(book => {
  // Create an instance of the template content
  const instance = document.importNode(fragment.content, true);
  // Add relevant content to the template
  instance.querySelector('.title').innerHTML = book.title;
  instance.querySelector('.author').innerHTML = book.author;
  // Append the instance ot the DOM
  document.getElementById('books').appendChild(instance);
});

请注意，此示例创建了一个模板（<template id=“book template”>），而不使用任何其他Web Components技术，再次说明Web Components中的三种技术可以独立使用或共同使用。

表面上，可以使用模板API书写一个任意结构的模板，并且在后续的代码中创建这个模板。站点上的另外一个页面可能会使用相同的服务，但是使用另外的结构来创建模板：

<template id="book-template">
  <li><span class="author"></span>'s classic novel <span class="title"></span></li>
</template>

<ul id="books"></ul>

可以点击这里查看示例：

https://codepen.io/calebdwill...

总结

随着Web开发越来越复杂，像我们这样的开发者开始将越来越多的开发推迟到Web平台本身，而Web平台本身也在不断成熟。Web Components规范是一组低级API，随着开发者的发展，这些API将随着我们的需求不断增长和发展。