将数据传递到Stenciljs中的插槽

Question

我正在创建某种通用组件，以在React项目和一些老式的Bootstrap + PHP中使用它。
所以，我有这样的设计。

如您所见，它在左右两侧都有重复的部分。而且我想知道如何尽可能多地进行动态渲染，这有点像React的渲染道具，但可以在纯HTML +普通JS中使用。
例如：在某些情况下可能没有图标，在其他情况下-可能会有辅助文本行，依此类推。

以前，我创建了一个带有动态渲染的数据网格组件：

<campaign-table>
  <campaign-head>
    <campaign-cell numeric>ID</campaign-cell>
    <campaign-cell>Name</campaign-cell>
    <campaign-cell size="2">Description</campaign-cell>
  </campaign-head>
  <campaign-body>
    <template>
      {{#each items}}
      <campaign-cell numeric>ID: {{ id }}</campaign-cell>
      <campaign-cell> Name - <strong>{{ name }}</strong> </campaign-cell>
      <campaign-cell>ℹ️ {{ description }}</campaign-cell>
      {{/each}}
    </template>
  </campaign-body>
</campaign-table>

CampaingBody组件具有方法：

  componentWillLoad() {
    this.template = this.el.querySelector('template');
    this.renderTemplate = hbs.compile(this.template.innerHTML);
  }

hbs是 Handlebars 包的地方。但是，当我使用此技巧时，所有这些VDOM魔术似乎都被破坏了。

所以，我很好奇，有没有办法以“模具”的方式实现这一目标？如果每个插槽都知道必要的数据，它将能够正确呈现它。

如何将数据传递到Stenciljs插槽？