在 Web 开发中，Custom Elements 是一个非常强大的工具，能够帮助我们创建出自定义的 HTML 元素，进而拓展 HTML 语义化带来的优势。Custom Elements 不仅能够创建全新的元素，还能进行继承、组合等操作。本文将介绍在 Custom Elements 中如何实现继承和集成。
什么是继承？
继承，即新建一个元素并以一个已有的元素作为基础，继承它的全部属性和方法，同时可以添加和修改特定的属性和方法。在 Custom Elements 中，我们可以使用原生的 extends 实现元素的继承。
假设我们想要新建一个 my-button 元素，它继承自原生 button 元素。我们可以这样写：
class MyButton extends HTMLButtonElement {} customElements.define('my-button', MyButton, { extends: 'button' });
这里，我们定义一个 MyButton 类，它继承自 HTMLButtonElement 。然后使用 customElements.define 方法定义一个 my-button 元素，它继承自 button 元素。在 HTML 中，我们可以这样使用它：
<button is="my-button">Click me!</button>
什么是集成？
集成，即将多个不同类别的元素组合在一起，以实现新的功能。在 Custom Elements 中，我们可以使用 Shadow DOM 技术实现元素的集成。
假设我们要创建一个新的元素 my-dialog，它包含一个按钮和一个弹出框。我们可以这样写：
-- -------------------- ---- ------- ----- -------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- ----- -------- - ------------------------------------------- ----- ----- - ------------------------------------- ------ ------------------------------ ------------------------------ -- -- - ----- ----- - ---------------------------------------- ------------------- - -------- --- ----- ----- - ----------------------------------- ------------------------------- -- -- - ----- ----- - ---------------------------------------- ------------------- - ------- --- - - ---------------------------------- ----------展开代码
这里，我们新建了一个 MyDialog 类，它继承自 HTMLElement 类。在构造函数中，我们创建了一个 Shadow DOM，然后向其中添加了一个 HTML 模板。模板中包含了一个按钮和一个弹出框。当按钮被点击时，我们修改弹出框的显示属性，使它显示出来。当弹出框中的关闭按钮被点击时，我们修改弹出框的显示属性，使它隐藏起来。
在 HTML 中，我们可以这样使用它：
-- -------------------- ---- ------- ----------- --------- --------------------- ------------ --------------- ---- -------------- ---- ---------------------- ----- ---------------------------- ------- ---- -- --- ----------- ------ ------ ----------- ------------展开代码
这里，我们使用 HTML 的 template 元素定义了一个模板，然后将它插入到 my-dialog 元素中。这里的 my-dialog 元素就是我们上面定义的 MyDialog 类。在 my-dialog 中包含了一个按钮和一个弹出框。
总结
本文介绍了 Custom Elements 中如何实现继承和集成。通过继承和集成，我们可以实现更加灵活的元素定义，以满足不同的需求。Custom Elements 是 Web 开发中非常强大的一项技术，它能够帮助我们创建出更好的 HTML 元素，同时也拓展了浏览器在界面组件上的能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5d8eaf6b2d6eab3154b82
