使用奥里利亚<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>元素呈现自定义元素中的内容。你可以在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大街的新版本，因为这已经在年底的某个时候加入可能。