共计 3157 个字符，预计需要花费 8 分钟才能阅读完成。
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> — <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”>），再次说明堆栈中的三种技术可以单独使用或共同使用。