在 Web 开发领域中，Custom Elements 是一个非常有用的技术，它可以让开发者创建自定义的 HTML 元素，提供更加灵活和可复用的组件。当我们使用 Custom Elements 创建一个新的元素时，它默认的行为是不会包含任何子节点。但是，我们可以通过编程式添加子节点来扩展它的功能，让它更加强大和实用。
实现子节点的添加
在 Custom Elements 中，我们可以通过 shadowRoot 属性来操作元素的内部结构。这个属性返回一个 ShadowRoot 对象，它是元素内部的一个独立的 DOM 树。我们可以通过 appendChild()、insertBefore() 和 replaceChild() 等方法向这个 ShadowRoot 中添加子节点。
以添加一个段落为例，我们可以使用下面的代码：
-- -------------------- ---- -------
--------- ----------------
-------
----- -
-------- ------
-
--------
-----------
--------
----------------------------------- ----- ------- ----------- -
------------- -
--------
------------------------ ---------
----- -------- - --------------------------------------
----- ----- - ---------------------------------
----- - - ----------------------------
------------- - -------------
-----------------------------------
-------------------------------
-
---
---------
-------------------------在这个例子中，我们首先定义了一个 <template> 元素，用来声明自定义元素的样式和结构。然后我们定义了一个 customElements，并将它命名为“my-element”。在构造函数中，我们创建了一个 ShadowRoot 对象，并将 <template> 中的内容克隆到它里面。然后，我们创建了一个 <p> 元素，并设置了它的文本内容。最后，我们调用了 appendChild() 方法，将这个 <p> 元素作为 ShadowRoot 的子节点进行添加。
深入理解
虽然以上的例子可以让我们了解如何向 Custom Elements 中添加子节点，但是实际开发中，我们需要更深刻的理解这个过程。在 Custom Elements 中，添加子节点的过程并不是简单的调用 appendChild() 方法，它涉及到了许多细节和注意事项。
实例化和升级
在创建自定义元素时，我们需要实例化这个元素，也就是将一个类转化为一个元素对象。这个过程可以使用 document.createElement() 方法来完成。在元素实例化之后，我们需要将这个元素进行“升级”，也就是将它的原型链与 HTMLElement 进行连接，设置一些属性和方法等。
const element = document.createElement('my-element');-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- ---
-
-- ---
-
----------------------------------- -----------创建 ShadowRoot
在进行子节点添加之前，我们需要先创建 ShadowRoot 对象。这可以使用 attachShadow() 方法来完成，这个方法可以接受一个选项对象作为参数，例如：
this.attachShadow({mode: 'open'});选项中的 mode 表示 ShadowRoot 的模式，可以是“open”或“closed”，分别表示开放和封闭的 ShadowRoot 对象。开放模式下可以让外部脚本访问 ShadowRoot 中的内容，而封闭模式下则不允许。
克隆和添加元素
在创建 ShadowRoot 之后，我们可以使用 appendChild() 方法向其中添加子节点。但是在添加子节点之前，我们需要将元素的模板内容（也就是 <template> 元素中的内容）克隆到 ShadowRoot 中。
const template = document.querySelector('#my-element');
const clone = template.content.cloneNode(true);
this.shadowRoot.appendChild(clone);这个过程需要注意的是，我们需要使用 content 属性来获取模板内容，而不是直接使用 <template>。因为 <template> 不是一个元素节点，它没有子节点，而是一个内容节点，它的子节点存储在 content 属性中。
总结
使用 Custom Elements 可以让我们创建更加灵活和可复用的组件，而编程式添加子节点则是扩展和定制组件功能的一个重要手段。在使用这个功能时，我们需要注意以下几点：
- 实例化和升级自定义元素；
- 创建 ShadowRoot，并选择适当的模式；
- 克隆
<template>中的内容，并添加到 ShadowRoot 中。
当我们理解了这些细节和注意事项之后，就可以在 Custom Elements 中自如地添加子节点，提高组件的可扩展性和可定制性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9f6b4f6b2d6eab351d07e