什么是 Custom Elements 和 Shadow DOM
Custom Elements 和 Shadow DOM 是 Web Components 的两个重要规范。Web Components 是一种用于开发可重用组件的技术，它可以让我们将 HTML、CSS 和 JavaScript 封装在一个自定义元素内，从而实现更好的组件化和模块化。
Custom Elements 是指自定义元素，我们可以使用它来创建一个全新的 HTML 元素，其行为和属性可以像普通 HTML 元素一样被操作和使用。Shadow DOM 是指影子 DOM，它可以将一个自定义元素的内部实现封装起来，使得外部无法直接访问和修改内部的 HTML 和 CSS，从而实现更好的封装性和隔离性。
如何使用 Custom Elements 和 Shadow DOM
创建 Custom Elements
创建 Custom Elements 需要使用 customElements.define 方法，该方法接受两个参数：自定义元素的名称和一个类，该类继承自 HTMLElement，并实现自定义元素的行为和属性。
----- -------- ------- ----------- -
------------- -
--------
-- --------
-
------------------- -
-- -----------
-
---------------------- -
-- -----------
-
------------------------------ --------- --------- -
-- -----------
-
-
---------------------------------- ----------在上面的代码中，我们定义了一个名为 MyButton 的自定义元素，并将其注册到了 my-button 标签名中。在类中，我们可以实现元素的行为和属性，并重写一些生命周期方法，以便在元素被插入到文档、移除出文档或者属性被修改时进行相应的处理。
创建 Shadow DOM
在自定义元素中，我们可以使用 attachShadow 方法创建 Shadow DOM，并将其附加到自定义元素上。Shadow DOM 中的 HTML 和 CSS 将被封装起来，只有自定义元素内部才能访问和修改。
----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-- ----- ------ ---
-------------------- - -
-------
-- ------ --- ---- --
----- -
-------- -------------
-------- --- -----
------ -----
----------------- --------
-------------- ----
------- --------
-
--------
-------------
--
-- -- ------ --- -- ---- - ---
-
-在上面的代码中，我们使用 attachShadow 方法创建了一个新的 Shadow DOM，并将其附加到了自定义元素上。我们可以在 Shadow DOM 中添加 HTML 和 CSS，这些内容将被封装在自定义元素内部，只有自定义元素内部才能访问和修改。
使用 Custom Elements 和 Shadow DOM
使用 Custom Elements 和 Shadow DOM 创建的组件可以像普通 HTML 元素一样使用，只需要使用自定义元素的标签名即可。
---------------- --------------
在上面的代码中，我们使用了名为 my-button 的自定义元素，并在其中添加了一些文本内容。这个自定义元素将会渲染出一个带有背景色和圆角的按钮，用户点击该按钮时可以触发相应的事件。
总结
在本文中，我们介绍了 Custom Elements 和 Shadow DOM 的基本概念和用法，并通过示例代码演示了如何使用这些技术实现封装的 HTML 标记。使用 Custom Elements 和 Shadow DOM 可以帮助我们更好地组织和管理前端代码，实现更好的组件化和模块化，提高代码的可维护性和可复用性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65632a74d2f5e1655dcd4f7a