什么是Web Component
Web Component是一套Web浏览器的技术和规范，能够让开发者定制自己的HTML元素
来自MDN的描述：
Web Component 是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的 web 应用中使用它们。
Web Component由三项技术组成：
Custom element（自定义元素）：创建一个自定义元素，并自定义其行为。
Shadow DOM（影子 DOM）：将若干元素封装成独立的DOM，并且与主文档DOM分开呈现，互不影响。
HTML template（HTML 模板）：用于定义可重用的HTML，在HTML中使用类似于前端框架（如Vue）中的模板，一次定义可重用代码，涉及到两个HTML标签：<template> 和 <slot>
废话不多说，让我们以一个自定义一个GitHub标签快速入门
快速入门
声明式地创建HTML模板
和往常我们书写HTML类似，唯一不同点便是以<template>包裹：
<template id="template_github_icon">
<a href="https://github.com/martixjohn" style="display: block; width: 100%; height: 100%" target="_blank">
<svg style="width: 100%; height: 100%" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" height="32">
<path fill="currentColor"
d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z">
</path>
</svg>
</a>
<style>
a {
display: block;
}
a > svg {
color: #333;
transition: all .3s;
}
a:hover > svg{
color: #000;
filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.2));
}
</style>
</template>
这里实质上是一个超链接包裹了一个SVG图形，图形是我们的GitHub图标。
你也许发现了：
template标签含有id，这是为了后续使用JavaScript去引用它并定义元素。
这里创建了一个style标签并编写了CSS样式，甚至直接使用元素选择器而没有以一个className或者id去应用样式，有人会问这样会不会导致和页面冲突。
答案是不会，这里的样式局限于这个模板内部，和外部DOM是隔离的。
使用JavaScript API定义和注册我们的元素
customElements.define(
"github-icon",
class extends HTMLElement {
constructor() {
super();
const template = document.getElementById("template_github_icon");
const templateContent = template.content;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(
templateContent.cloneNode(true)
);
}
}
);
实际上在第一步你可以不以HTML创建“模板”，而是在类的构造器中以JS自定义元素的创建过程
使用自定义元素
HTML页面上使用
和普通元素使用方式完全相同，你甚至还可以为其添加属性(attribute)
<github-icon style="width: 40px; height: 40px;"></github-icon>
JavaScript内创建
也和普通元素的创建方式相同
const element = document.createElement('github-icon');
总结
以上演示了如何自定义元素，并在页面中使用他们。
Web Component的灵活和强大不止于此，你甚至还可以：
如果你仔细发现的话，本博客页面使用的GitHub图标正是一个自定义元素。
参考
400 186 1886
