如何使用自定义元素将子自定义元素包装到div中

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    // 在元素被插入到文档时执行的逻辑
  }

  disconnectedCallback() {
    // 在元素从文档中移除时执行的逻辑
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // 当元素的属性发生变化时执行的逻辑
  }

  adoptedCallback() {
    // 当元素被移动到新的文档时执行的逻辑
  }
}

customElements.define('my-custom-element', MyCustomElement);

connectedCallback() {
  const div = document.createElement('div');
  const childElements = this.querySelectorAll('my-child-element');

  childElements.forEach(childElement => {
    div.appendChild(childElement);
  });

  this.appendChild(div);
}

<my-custom-element>
  <my-child-element></my-child-element>
  <my-child-element></my-child-element>
</my-custom-element>