Custom Elements 和 Shadow DOM 是两个 HTML 标准，提供了一种可以扩展和封装 Web 组件的方式。这些标准的出现，使得我们可以更方便地构建和维护可重用性更强的 Web 代码。
什么是 Custom Elements 和 Shadow DOM？
Custom Elements 允许我们定义自己的 HTML 元素，同时可以为这些元素添加自定义行为和属性。这些元素与原生的 HTML 元素一样可以被操作，但是我们可以在定义的元素内部添加自定义的组件逻辑。
Shadow DOM 允许我们将 Web 组件的样式和 DOM 结构封装在一个独立的根节点内部，这样就可以避免我们的组件样式受到外界的干扰或者污染全局的样式。
案例演示
这里给出一个简单的案例，我们来学习如何使用 Custom Elements 和 Shadow DOM，以实现一个自定义的轮播图组件。
- 自定义 HTML 元素
-- -------------------- ---- -------
--------- -----------------------
---- ------ --- ---- ---
-------
--------- -
-------- -----
--------- -------
-
--------------- -
-------- -----
----------- --------- ---- ---------
-
--------
---- ------ --- -- --- -- ---
---- -----------------
---- -----------------------
-------------
------
------
-----------
--------
----- -------- ------- ----------- -
------------- -
--------
-- -- ------ --- ----
----- ---------- - ------------------------ ---------
----- -------- - ---------------------------------------------
----- -------- - ---------------------------------
---------------------------------
-
-
-- --------- --- --------- -
-------------------------------------------------- ----------
---------在上面的代码中，我们首先定义了一个 HTML 模板，其中包含了组件的 DOM 结构和样式。
接着，我们定义了一个叫做 Carousel 的 Custom Element，继承自 HTMLElement，并在 constructor 方法中使用 attachShadow 方法创建 Shadow DOM，并将模板的内容克隆到 Shadow DOM 中。
最后，我们使用 window.customElements.define 方法将自定义的元素注册到 Web Component 中，这样我们就可以在 HTML 中使用自定义元素了。
- 添加自定义属性
为了让组件更加可配置和易用，我们可以为 Custom Element 添加自定义属性。
-- -------------------- ---- -------
---- - ------ ------- -------- ---
----- -------- ------- ----------- -
------ --- -------------------- -
------ --------- ----------
-
------------- -
---
-
-- --------------
------------------------------ --------- --------- -
-- ----- --- -------- -
------------------------------------------------------ - ---------
-
-- ----- --- --------- -
------------------------------------------------------- - ---------
-
-
-在上面的代码中，我们使用 observedAttributes 方法定义了需要监听的自定义属性，并在 attributeChangedCallback 方法中监听自定义属性的变化，并更新组件的样式。
- 实现轮播图功能
-- -------------------- ---- -------
---- - ------ ------- -------- ---
----- -------- ------- ----------- -
---
------------------- -
--- ---------- - --
--- ------
-- -----
----- ----- - -- -- -
-------------
-- ----------- -- --------------------- -
---------- - --
-
----- ---------- - -----------------
---------------------------------------------------------------- - ------------------------- - ----------------
----- - ----------------- ------
--
----- - ----------------- ------
-- --------
---------------------------------- -- -- -
--------------------
---
-- --------
----------------------------------- -- -- -
----- - ----------------- ------
---
-
-在上面的代码中，我们在 Custom Element 中添加了轮播图的功能。我们在 connectedCallback 方法中实现了轮播图，当 DOM 元素被插入到页面中时，轮播图就会开始。
这里我们使用了定时器，并根据 startIndex 和每张图片的宽度来计算需要移动多少距离。
同时，我们监听了鼠标悬浮和离开事件，来控制轮播图的停止和继续。
总结
Custom Elements 和 Shadow DOM 是开发 Web 组件的重要标准，它们提供了一种可以扩展和封装 Web 组件的方式。
在本文中，我们详细介绍了 Custom Elements 和 Shadow DOM 的使用方法，并通过实现一个简单的轮播图案例来演示这些技术的应用。
通过学习本文，我们可以更好地理解 Custom Elements 和 Shadow DOM 的设计核心，以及如何使用它们来构建高质量的 Web 组件。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c448648841e9894a9db73