在Web组件中注入子组件

Question

假设我正在创建模板包含特殊子组件的组件。例如：

<x-audio-player playlist-json="my_js_list"></x-audio-player>

使用Shadow DOM

<x-playlist>
    <x-track name="Track 1"></xtrack>
    <x-track name="Track 2"></xtrack>
    <x-track name="Track 3"></xtrack>
</x-playlist>

可能有人需要完全改变曲目的视图。因此，我需要将Shadow DOM更改为：

<x-playlist>
    <y-track name="Track 1"></y-track>
    <y-track name="Track 2"></y-track>
    <y-track name="Track 3"></y-track>
</x-playlist>

因此。最好的方法是什么？

Answer 1

您可以为插入点定义多个可能的选择。 所以你可能想做类似的事情：

<template>
  <content select="x-track, y-track"></content>
</template>

希望这有帮助！