Nativeweb组件获取默认插槽的子元素的推荐方法。

通过使用原生Web组件API中提供的“slot”属性，我们可以轻松获取默认插槽中的子元素。首先，我们可以使用“this.shadowRoot”属性访问组件的根Shadow DOM。然后，我们可以使用“querySelectorAll”方法查找所有与“slot”属性匹配的元素，并使用“assignedNodes”属性获取默认插槽中的所有子节点。

示例代码如下：

class MyComponent extends HTMLElement {
  constructor() {
    super();

    // 创建 Shadow DOM
    this.attachShadow({ mode: 'open' });

    // 插入一些 DOM 内容到默认插槽
    this.innerHTML = `
      <h1>Hello World!</h1>
      <p>这是一个有默认插槽的 Web 组件。</p>
      <slot></slot>
    `;
  }

  connectedCallback() {
    // 获取默认插槽中的所有子节点
    const defaultSlotChildren = this.shadowRoot.querySelectorAll('[slot=""]')[0].assignedNodes();

    // 打印子节点
    console.log('默认插槽中的子节点：', defaultSlotChildren);
  }
}

// 注册组件
customElements.define('my-component', MyComponent);