das <content> Element Aurelia Mit

Question

Ich versuche, ein benutzerdefiniertes Element zu schaffen, das dem Benutzer erlaubt, den Inhalt des Elements zu spezifizieren, wenn das Element zu schaffen, wie folgt aus:

<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> 

Und meine benutzerdefinierte Element sieht im Wesentlichen wie folgt aus:

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

ich habe völlig auf die Verwendung des <content> Element erraten und es funktioniert nicht so wie es scheint. Ich kann auch keine Dokumentation darüber finden. Ich habe gesehen, andere verwenden es mit einem select Attribut auf ein bestimmtes Element innerhalb der Inhalt des benutzerdefinierten Elements, aber ich möchte auf alles darin zugreifen - kein bestimmtes Element.

Was mache ich falsch?

Answer 1

Aurelia verwendet Element, um Inhalt in benutzerdefinierten Elementen zu rendern. Sie können darüber in documentation hub lesen, oder werfen Sie einen Blick auf blog post, wo sie die Begründung für Elemente erklären. Grundsätzlich ist es ein Teil von Shadow DOM v1 specification und Aurelia Team versucht, die Standards wo immer möglich zu folgen.

Eine coole Sache mit ist, dass Sie mehrere benannte in Ihrem benutzerdefinierten Element haben können, die in Post oben erläutert wird.

Also, Ihr kundenspezifisches Element würde wie folgt aussehen:

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

Natürlich bedeutet dies, dass Sie die neuere Version von Aurelia verwenden müssen werden, da dies irgendwann am Ende hinzugefügt wurde Kann.