使用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的属性指向一个特定元素中的自定义元素的内容,但我想访问它里面的一切-而不是一个特定的元素.

我究竟做错了什么？

Answer 1

Aurelia使用<slot>元素在自定义元素中呈现内容.您可以在文档中心阅读相关内容,或者查看博客文章,了解<slot>元素的推理.基本上,它是Shadow DOM v1规范的一部分,Aurelia团队尽可能地遵循标准.

一个很酷的事情<slot>是你可以在自定义元素中有多个命名元素,这在上面的帖子中有解释.

所以,你的自定义元素看起来像这样:

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

当然,这意味着你需要使用更新版本的Aurelia,因为这已经在5月底的某个时候添加了.