Using the Aurelia <content> element

powerbuoy

I'm trying to create a custom element that allows the user to specify the element's content when creating the element, like this:

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

And my custom element essentially looks like this:

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

I've totally guessed at the use of the <content> element and it doesn't work like this it seems. I can't find any documentation on it either. I've seen others use it with a select attribute pointing to a specific element inside the custom element's contents but I want to access everything inside it - not a particular element.

What am I doing wrong?

Miroslav Popovic

Aurelia uses <slot> element to render content within custom elements. You can read about it in documentation hub, or take a look at blog post where they explain the reasoning for <slot> elements. Basically, it's a part of Shadow DOM v1 specification and Aurelia team tries to follow the standards wherever possible.

One cool thing with <slot> is that you can have multiple named ones in your custom element, which is explained in post above.

So, your custom element would look something like this:

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

Of course, this means that you'll need to use the newer version of Aurelia, since this has been added sometime at the end of May.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Using the Aurelia <content> element

From Dev

Conditionally display Element using Aurelia

From Dev

Cannot refresh content in browser using http-server with Aurelia

From Dev

Shorten content of an element using CSS

From Dev

Shorten content of an element using CSS

From Dev

Wrap substring of element content with an element using jQuery

From Dev

What is the difference between custom element and just an import using require in Aurelia

From Dev

Referencing view-model of element using Aurelia's ref attribute

From Dev

What is the difference between custom element and just an import using require in Aurelia

From Dev

Aurelia: if binding and content selectors

From Dev

Custom Element Singletons in Aurelia

From Dev

Focus an element in Aurelia

From Dev

Access a DOM element in Aurelia

From Dev

Aurelia Custom element with dialog

From Dev

Get content of a <title> element in html using JavaScript

From Dev

Using custom elements in the content element with polymer

From Dev

Get the text content of an html element using xpath

From Dev

Adding html content after an element using css

From Dev

Using custom elements in the content element with polymer

From Dev

Get content of a <title> element in html using JavaScript

From Dev

How to load the content of <h> element using jquery

From Dev

How to retrieve content (element by element) of a external website using AngularJS

From Dev

Aurelia Multiple Properties in custom element

From Dev

Aurelia - render custom element by name

From Dev

Aurelia: Binding textContent of a custom element?

From Dev

Aurelia custom element with a table with a slot in it

From Dev

Aurelia compose element: childContainer is not defined

From Dev

Aurelia Custom Element for modal form

From Dev

Using Admin LTE with Aurelia

Related Related

  1. 1

    Using the Aurelia <content> element

  2. 2

    Conditionally display Element using Aurelia

  3. 3

    Cannot refresh content in browser using http-server with Aurelia

  4. 4

    Shorten content of an element using CSS

  5. 5

    Shorten content of an element using CSS

  6. 6

    Wrap substring of element content with an element using jQuery

  7. 7

    What is the difference between custom element and just an import using require in Aurelia

  8. 8

    Referencing view-model of element using Aurelia's ref attribute

  9. 9

    What is the difference between custom element and just an import using require in Aurelia

  10. 10

    Aurelia: if binding and content selectors

  11. 11

    Custom Element Singletons in Aurelia

  12. 12

    Focus an element in Aurelia

  13. 13

    Access a DOM element in Aurelia

  14. 14

    Aurelia Custom element with dialog

  15. 15

    Get content of a <title> element in html using JavaScript

  16. 16

    Using custom elements in the content element with polymer

  17. 17

    Get the text content of an html element using xpath

  18. 18

    Adding html content after an element using css

  19. 19

    Using custom elements in the content element with polymer

  20. 20

    Get content of a <title> element in html using JavaScript

  21. 21

    How to load the content of <h> element using jquery

  22. 22

    How to retrieve content (element by element) of a external website using AngularJS

  23. 23

    Aurelia Multiple Properties in custom element

  24. 24

    Aurelia - render custom element by name

  25. 25

    Aurelia: Binding textContent of a custom element?

  26. 26

    Aurelia custom element with a table with a slot in it

  27. 27

    Aurelia compose element: childContainer is not defined

  28. 28

    Aurelia Custom Element for modal form

  29. 29

    Using Admin LTE with Aurelia

HotTag

Archive