使用 Aurelia <content> 元素

Question

我正在尝试创建一个自定义元素，允许用户在创建元素时指定元素的内容，如下所示：

<custom-element title="Hello">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
</custom-element>

我的自定义元素基本上是这样的：

<template>
    <div class="my-custom-element">
        <h2 if.bind="title">${title}</h2>
        <content></content>
    </div>
</template>

我完全猜到了<content> 元素的使用，它看起来不像这样工作。我也找不到任何关于它的文档。我已经看到其他人将它与指向特定元素的select 属性一起使用 inside 自定义元素的内容，但我想访问其中的所有内容 - 而不是特定元素。

我做错了什么？

Answer 1

Aurelia 使用<slot> 元素在自定义元素中呈现内容。您可以在documentation hub 中阅读有关它的信息，或者查看blog post，其中他们解释了<slot> 元素的原因。基本上，它是Shadow DOM v1 specification 的一部分，Aurelia 团队尽可能地遵循标准。

<slot> 的一个很酷的事情是，您可以在自定义元素中拥有多个命名元素，这在上面的帖子中进行了解释。

因此，您的自定义元素将如下所示：

<template>
    <div class="my-custom-element">
        <h2 if.bind="title">${title}</h2>
        <slot></slot>
    </div>
</template>

当然，这意味着您需要使用较新版本的 Aurelia，因为它是在 5 月底的某个时候添加的。