Javascript 如何选择自定义元素的子元素的位置？

您好，我有一个自定义webcomponent，我想决定将由上（父）元素插入的子元素放置在何处

使用我的自定义组件的上层html元素的文件：

  <custom-component>
    <custom-component2></custom-component2>
  </custom-component>

描述结构内部自定义组件的文件：

<h5>title</h5>
 <p>paragraph</p>

标题
段落

导致DOM：

  <custom-component>
        <custom-component2></custom-component2>
       <h5>title</h5>
       <p>paragraph</p>
 </custom-component>

标题
段落

我想要的是：

  <custom-component>
       <h5>title</h5>
       <p>paragraph</p>
        <custom-component2></custom-component2>
 </custom-component>

标题
段落

---

我如何选择在何处放置内容，如角形或道具中的ng内容。儿童在React中？我正在构建一个定制的webcomponent库。谢谢

您可以使用

插槽

显示面向家长的内容。此外，您还可以通过命名插槽来组织此操作

这在有角度的情况下起作用

---

您可以为这些

ng内容

命名。

您可以使用

插槽

显示面向父级的内容。此外，您还可以通过命名插槽来组织此操作

这在有角度的情况下起作用

---

你可以给这些内容命名。

正如@FloWy所说，你可以使用

对于本机自定义元素，您需要使用阴影DOM

customElements.define（'custom component'，类扩展了HtmleElement{
构造函数（）{
超级（）
var sh=this.attachShadow（{mode:'open'}）
sh.innerHTML=`Title
段落

插槽内容：`
}
}）

子元素

正如@FloWy所说，您可以使用

对于本机自定义元素，您需要使用阴影DOM

customElements.define（'custom component'，类扩展了HtmleElement{
构造函数（）{
超级（）
var sh=this.attachShadow（{mode:'open'}）
sh.innerHTML=`Title
段落

插槽内容：`
}
}）

子元素

您不能在

的内容中使用

吗？并不总是有自定义组件2，它取决于上面的组件。我可以是一个div或多个div…您可以尝试使用影子dom（）将

附加到

中的正确位置。尽管这取决于您如何“获取”

。您不能在

的内容中使用

吗？并不总是有自定义组件2，它取决于上面的组件。我可以是一个div或多个div…您可以尝试使用影子dom（）将

附加到

中的正确位置。虽然这取决于你如何“得到”

。是的，我想是这样。你可以测试一下：）是的，我想是的。您可以测试它：）