Custom Elements 是一个新的 Web 标准，它允许开发者定义自己的 HTML 元素。在 HTML 标记中，我们可以使用内建的 HTML 元素（比如 div、label、input 等）来布置网页内容。Custom Elements 允许我们定义更多自造的元素，这些元素可以函数和事件处理程序，这大大的拓展了 HTML 标记的表现力。
通过结合 CSS，Custom Elements 可以使开发者更容易地创建可读性和可用性好的组件，以此提高网页的使用体验。
编写 Custom Elements
要创建 Custom Element，我们首先要使用定义该元素的类。这个类要继承自 HTMLElement 基础类。在构造函数中，我们可以为元素定义他所需要的一切属性。
在下面的示例代码中，我们创建了一个自定义的按钮元素，该元素可以设置文本标签和事件处理程序。
-- -------------------- ---- ------- ----- ------------ ------- ----------- - ------------- - -------- ----- ------ - ------------------- ----- ------ --- ----- ------ - --------------------------------- ------------------ - --------------------------- -------------------------------- -- -- - ---------- ------- --- ---------- --- --------------------------- - - -------------------------------------- --------------展开代码
上面的代码中，CustomButton 类从 HTMLElement 继承默认的行为，同时我们在构造函数中创建了一个新的按钮元素，并向其添加了文本和事件监听。
请注意，最后一行代码使用了 customElements.define() 方法来将新的元素类型注册为 Custom Element。该函数的第一个参数是元素的类型字符串名称，第二个参数是元素的构造函数。
样式化 Custom Element
定义了 Custom Elements 之后，我们可以为其添加样式来增强其可读性和可用性。在下面的代码中，我们为之前定义的自定义按钮添加样式:
-- -------------------- ---- ------- ------- ------------- - -------- ------ ------- ----- -------- ---- ----- -------------- ---- ----------------- -------- ------ ------ ---------- ----- ------------ ----- ------- -------- ----------- ---------------- ---- ----- - ------------------- - ----------------- -------- - -------- -------------- ------------ ---------------------展开代码
在样式表中，我们可以针对自定义元素使用和内置元素相同的样式属性。在上面的示例代码中，我们为自定义按钮添加了一些基础的样式属性，如 display、margin、padding、border-radius、background-color、color 和 font-size。同时，我们还为鼠标指针悬停时的状态添加了一些特殊颜色的转换样式。
通过添加样式，我们可以大幅增强自定义元素的可读性和可用性，使得他们与常规的 HTML 元素一样方便使用。
结论
Custom Elements 是对原生 Web 标签的扩充，它们可以更方便地创建自定义的 HTML 元素，并为其添加大量事件和深度样式。通过结合 CSS，我们可以最大程度地发掘 Custom Elements 的潜力，并创造出更为复杂和高效的组件。
在 Web 开发中，Custom Elements 正被越来越多的开发者和公司所采用和推崇，他们对 Web 应用的可读性和可用性带来了巨大的提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674cf542a336082f2546df79
