javascript - javascript Web 组件（自定义元素）的列表渲染

Question

想象一下，我有两个这样的自定义元素：

    <accordeon>
       <collapse>
          <div slot="header">...</div>
          <div slot="body">...</div>
       </collapse>
    </accordeon>

我将有多个collpases里面accordeon。（collapse单击时隐藏/显示正文）。在 html 中，我可以选择和设置两个collapse插槽的内容。

现在我有一个问题，我收到大型 JSON 数组，显示为accordeon. 如果我将该数组传递给<accordeon>，那么我认为我应该在 for 循环内渲染<collapse>手风琴内的元素。但是后来我不能collapse用作自定义元素，我的意思是我将无法设置和管理插槽的内容collapse，因此用作组件不会灵活（因为我认为自定义元素不应该从该元素内部进行修改）。

所以我认为我需要像 Vue 中的 v-for 和 angular 中的 ngFor 之类的东西，但我认为这不会是微不足道的。那么在这种情况下我应该怎么做渲染列表呢？

PS：考虑到在那之后我需要无限滚动。

标签： javascriptangularweb-componentw3ccustom-element