在前端开发中，我们经常需要自定义组件来实现特定的功能。Custom Elements 是 Web 标准中用于创建自定义组件的 API。通过 Custom Elements，您可以将自定义元素注册到 DOM，并根据需要设置其行为和样式。
本文将介绍如何在 Custom Elements 的 connectedCallback 方法中操作 DOM。请注意，connectedCallback 是一个生命周期钩子，它在元素与 DOM 相关联时被调用。
为什么要在 connectedCallback 中操作 DOM？
我们在实现自定义组件时经常需要操作 DOM 元素来实现特定的功能或样式。Custom Elements 的 connectedCallback 方法是适合执行此类操作的最佳位置。因为该方法只在元素已连接到 DOM 并且可以操作元素时被调用。这是执行 DOM 操作的理想地点。
此外，connectedCallback 只会在当前元素首次连接到 DOM 时被调用。这可以确保不会重复添加元素或导致性能问题。因此，将 DOM 操作放在 connectedCallback 中比将其放在其他生命周期钩子中更可靠。
示例代码
下面是一个简单的示例，向您展示如何在 connectedCallback 中操作 DOM。
---------------------------------
----- ------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
------------------- -
----- - - ----------------------------
------------- - ------- --------
-------------------------------
-
-
---------------------------------------------- ---------------在示例代码中，我们定义了一个名为 CustomElement 的自定义元素，并将其注册到 window.customElements 中。在 connectedCallback 方法中，我们创建一个新的 p 元素，并将其添加到元素的 shadowRoot 中。这会将“Hello, world!”添加到自定义元素中。
请注意，在示例代码中，我们使用了 shadow DOM。这是因为 shadow DOM 可以将元素的样式和行为封装在一个隔离的 DOM 树中，从而使组件更具可维护性和可重用性。
操作已连接的元素
有时我们需要在已连接的元素上执行操作。例如，更新元素的状态或添加事件侦听器。
如果需要在已连接的元素上执行操作，请确保处理断开和连接事件。您可以使用 disconnectedCallback 方法和 connectedCallback 方法来执行这些操作。
下面是一个示例，它向您展示如何在已连接的元素上添加事件侦听器。
----- ------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
------------------- -
------------------------------ -----------------------------
----- - - ----------------------------
------------- - ------- --------
-------------------------------
-
---------------------- -
--------------------------------- ------------------
-
------------- -
------------------------
-
-
---------------------------------------------- ---------------上面的示例代码中，我们在 connectedCallback 中添加了一个 click 事件侦听器，并在 disconnectedCallback 中删除了它。这可以确保在元素断开连接时不会发生内存泄漏。
结论
在 Custom Elements 的 connectedCallback 方法中操作 DOM 是实现自定义组件的最佳实践之一。这可以确保您的 DOM 操作只会在元素已连接到 DOM 并且可以操作元素时被调用。在 connectedCallback 中执行 DOM 操作还可以确保操作不会重复添加元素或导致性能问题。请始终确保在已连接的元素上执行操作时处理断开和连接事件。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67399783d4ed1d74d41296b2