<shadow-repeat>
Repeat slotted elements in shadow DOM
repeater
property is a function returningTemplateResult
with<slot>
elements- The repeater can be selective and sortable
items
write-only property is optional to trigger redrawing on items changes- Note that changes of items of
items
are not watched
- Note that changes of items of
; ; html` repeat(this.items, (item, index) => html`<slot name=$index></slot>`)} .items=><!-- items write-only property is optional to trigger redrawing --> <!-- stock views in Light DOM and show selected views in shadow DOM via slot names as keys --> </shadow-repeat>`;
Install
npm install shadow-repeat
Import
;
Full Source Code
/**@license https://github.com/t2ym/shadow-repeat/blob/master/LICENSE.mdCopyright (c) 2019, Tetsuya Mori <t2y3141592@gmail.com>. All rights reserved.*/; /** * <shadow-repeat> element to repeat items in Shadow Root via slot elements * * Usage: * <shadow-repeat .repeater=${() => repeat(this.items, (item, index) => html`<slot name=${index}></slot>`)} .items=${this.items}><!-- items property is optional to trigger redrawing --> * <!-- stock views in Light DOM and show selected views in shadow DOM via slot names as keys --> * ${repeat(this.items, (item, index) => index, (item, index) => html`<item-element slot=$ * </shadow-repeat> * * @customElement */ static { return 'shadow-repeat'; } { super; this; } { thisconnected = true; this; } { thisconnected = false; } { return this_repeater; } { this; } { return null; } { this; } { this; } { if !thisneedsRender && thisconnected thisneedsRender = true; Promise; } { return html``; }customElements;