Web组件简介

Web组件是什么？

Web组件由三个独立的技术组成：

• 自定义元素。很简单，这些是完全有效的HTML元素，包含使用一组JavaScript API制作的自定义模板，行为和标记名称（例如，<one-dialog>）。自定义元素在HTML Living Standard规范中定义。
• Shadow DOM。能够隔离CSS和JavaScript，例如一个<iframe>。这在Living Standard DOM规范中定义。
• HTML模板。HTML中用户定义的模板，在调用之前不会呈现。<template>标签在HTML Living Standard规范中定义。

这些是构成Web组件规范的内容。

HTML模块(HTML Modules)可能是堆栈中的第四种技术，但它尚未在四大浏览器中实现。Chrome团队已宣布有意在未来版本中实施这些内容。

除Microsoft Edge和Internet Explorer 11外，Web组件通常可在所有主流浏览器中使用，但也有工具可以填充这些空白。

每种技术可以独立使用或与任何其他技术组合使用。换句话说，它们并不是相互排斥的。

Custom elements(自定义元素)

顾名思义，自定义元素是HTML元素，如<div>，<section>或<article>，但我们可以通过浏览器API定义自己的名称。自定义元素就像那些标准的HTML元素，如<news-slider>或<bacon-cheeseburger>。展望未来，浏览器供应商已承诺不会在名称中创建包含短划线的新内置元素以防止冲突。

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

JS

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h1>Hello world</h1>`;
  }
}
    
customElements.define('my-component', MyComponent);

HTMl

<my-component></my-component>

Result
Hello world

在这个例子中，我们定义了<my-component>，我们自己的HTML元素。不可否认，它没有做太多，但这是自定义元素的基本构建块。所有自定义元素必须以某种方式扩展HTMLElement才能在浏览器中注册。

存在没有第三方框架的自定义元素，浏览器供应商致力于规范的持续向后兼容性，除了保证根据规范编写的组件不会破坏API更改。更重要的是，这些组件通常可以与现有最流行的框架一起使用，包括Angular，React，Vue等，只需要很少的工作量

Shadow DOM

shadow DOM是DOM的封装版本。这允许作者有效地将DOM片段彼此隔离，包括可以用作CSS选择器的任何东西以及与它们相关联的样式。通常，文档范围内的任何内容都称为light DOM，而shadow root中的任何内容都称为shadow DOM。

使用light DOM时，可以使用document.querySelector（'selector'）或通过使用element.querySelector（'selector'）定位任何元素的子元素来选择元素;以同样的方式，可以通过调用shadowRoot.querySelector来定位影子根的子节点，其中shadowRoot是对文档片段的引用 - 不同之处在于影子根的子节点不能从轻型DOM中选择。例如，如果我们在其中有一个带有<button>的影子根，则调用shadowRoot.querySelector（'button'）将返回我们的按钮，但是不调用该文档的查询选择器将返回该元素，因为它属于不同的DocumentOrShadowRoot实例。样式选择器以相同的方式工作。

在这方面，影子DOM的工作类似于<iframe>，其中内容与文档的其余部分隔离;但是，当我们创建一个影子根时，我们仍然可以完全控制页面的那一部分，但是作用于上下文。这就是我们所说的封装。

如果您曾编写过重用相同内容的组件或依赖于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元素的阴影边界），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>`;

HTML templates

HTML <template>元素允许我们在普通的HTML流程中删除可重复使用的代码模板，这些模板不会立即呈现，但可以在以后使用。

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

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

上面的示例在脚本使用模板之前不会呈现任何内容，实例化后代码将告诉浏览器如何处理它。

JS
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);
});

请注意，此示例在没有任何其他Web组件技术的情况下创建模板（<template id =“book-template”>），再次说明堆栈中的三种技术可以单独使用或共同使用。