私はこのように、要素を作成する際、ユーザは要素の内容を指定することができますカスタム要素を作成しようとしていアウレリア<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

アウレリアは、<slot>要素を使用してカスタム要素内でコンテンツをレンダリングします。 documentation hubでそれを読むか、blog postを見て<slot>要素の理由を説明してください。基本的には、それはShadow DOM v1 specificationの一部であり、Aureliaチームは可能な限り標準に準拠しようとしています。

<slot>のクールなことの1つは、上記のポストで説明したカスタム要素に複数の名前付き名前を付けることができることです。

だから、あなたのカスタム要素は、次のようになります

もちろん

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

、これはこれはの最後にいつか追加されているので、あなたは、アウレリアの新しいバージョンを使用する必要がありますことを意味し5月。