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”>），再次说明堆栈中的三种技术能够单独使用或共同使用。