使用奧裏利亞<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大街的新版本，因爲這已經在年底的某個時候加入可能。