This element tag is used to render a list of items from an array. You can bind the item’s value as custom element’s attribute or render it using the <slot>
tag. The item’s value can be accessed using the $.
prefix.
You can also access the meta of the current item using the !.
prefix.
<custom-element name="nested-element">
<element-attr name="content" type="string"></element-attr>
<template>
<style>
:host {
display: block;
background: red;
padding: 10px;
}
</style>
<slot name="@content"></slot>
</template>
</custom-element>
<custom-element name="my-element">
<element-state name="array" type="array">
[{ "label": "Hello" }, { "label": "World" }]
</element-state>
<template>
<repeat-list of="#array">
<slot name="!.index"></slot>
is
<slot name="$.label"></slot>
<nested-element _content="$.label"></nested-element>
</repeat-list>
</template>
</custom-element>
<my-element></my-element>