自定义HTML元素的快速指南

原始地址：https://dev.to/zippcodder/a-quick-guide-to-custom-html-elements-5f3b

‘’'在熟悉像React和Angular之类的现代框架的基于组件的系统之后，当我遇到"Web Components"一词时，我立即产生了兴趣。在深入研究这个主题后，我觉得值得分享。因此，今天我将提供一个关于Web Components的快速指南，介绍它们的运作方式，并说明我们如何通过应用这个概念来创建自己的自定义HTML元素！

链接
什么是Web Components？
Web Components是任何拥有自己的DOM树、CSS样式和脚本的HTML元素的标签，与DOM的其余部分完全隔离。这个底层的DOM树被称为Shadow DOM。

链接
Shadow DOM
为了进一步了解Shadow DOM，以以下HTML中的的内容为例：
在中，我们首先看到的是#shadow-root。它表示元素的shadow DOM的根，就像是文档的根元素一样。包含#shadow-root的元素本身被称为"shadow host"，在这个例子中是。#shadow-root后面的所有内容都是该元素的shadow DOM的内容。简单吧？😃
并非所有的元素都能附加一个Shadow DOM，但如果您需要一种快速提供封装和抽象的方法，那么附加一个Shadow DOM可能会很有用。
在这个特定的例子中，输入元素的Shadow DOM只包含两个

元素。通过每个元素的id，您可能已经了解到这些元素用于创建范围滑块的轨道和滑块部分。
这是Shadow DOM发挥作用的一个完美例子。它使得像和这样的元素能够将它们的移动部件和功能隐藏在文档的其他部分之外，简化和组织程序。
我们可以进一步扩展这一点，通过实现Shadow DOM API来创建我们自己的自定义HTML组件…😁

链接
创建我们的第一个自定义HTML元素
在开始构建我们的自定义元素之前，我们首先需要了