javascript web组件的列表呈现（自定义元素）

假设我有两个这样的自定义元素：

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

...
...

我将在

accordeon

内有多个

collpase

。（

折叠

单击时隐藏/显示正文）。在html中，我可以选择和设置

collapse

slot的内容

---

现在我有一个问题，我收到一个大的JSON数组，显示为

accordeon

。如果我将该数组传递给

，那么我认为应该在for循环内的accordion中呈现

元素。但是我不能使用

collapse

作为自定义元素，我的意思是我不能对

collapse

的插槽内容进行样式设置和管理，因此它不能灵活地用作组件（因为我认为自定义元素不应该从该元素内部修改）

所以我想我需要像Vue中的v-for和angular中的ngFor这样的东西，但我不认为这是微不足道的。那么，在这种情况下，对于呈现列表，我应该做些什么呢

---

注：考虑到这一点，之后我需要无限滚动。

您已经回答了自己的问题“反应中的ngFor…”，ngFor是角度；）我只是拼错了，在你的评论之前编辑了它，所以我应该使用这种循环渲染？有什么文档或示例可以这样做吗？“我的意思是，我无法设计和管理折叠槽的内容，因此它不能灵活地用作组件（因为我认为自定义元素不应该从该元素内部进行修改）。”你能解释一下这一点吗？我的意思是，如果我只编写并完成所有的工作（就像根据json数组构造折叠）在后台的元素内部，那么这个组件就根本不可重用了。你已经回答了你自己的问题“ngFor in React…”，ngFor是angular；）我只是错拼了，在你的评论之前编辑了它，所以我应该使用这种循环渲染？有什么文档或示例可以这样做吗？“我的意思是，我无法设计和管理折叠槽的内容，因此它不能灵活地用作组件（因为我认为自定义元素不应该从该元素内部进行修改）。”你能解释一下这一点吗？我的意思是，如果我只编写并完成所有的工作（就像根据json数组构造折叠）在后台的元素内部，那么这个组件将根本不可重用。