repeater property is a function returning TemplateResult 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
import{html}from'lit-html/lit-html.js';import{repeat}from'lit-html/directives/repeat.js';html`<shadow-repeat.repeater=${()=>repeat(this.items,(item,index)=>html`<slotname=${index}></slot>`)}.items=${this.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 -->${repeat(this.items,(item,index)=>index,(item,index)=>html`<item-elementslot=${index}.data=${item} discard-on-disconnect></item-element>`)}</shadow-repeat>`;
/**@license https://github.com/t2ym/shadow-repeat/blob/master/LICENSE.mdCopyright (c) 2019, Tetsuya Mori <t2y3141592@gmail.com>. All rights reserved.*/import{html,render}from'lit-html/lit-html.js';/** * <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=${index} .data=${item} discard-on-disconnect></item-element>`)} * </shadow-repeat> * * @customElement */exportclassShadowRepeatextendsHTMLElement{staticgetis(){return'shadow-repeat';}constructor(){super();this.attachShadow({mode: 'open'});}connectedCallback(){this.connected=true;this.invalidate();}disconnectedCallback(){this.connected=false;}getrepeater(){returnthis._repeater;}setrepeater(value){this._onRepeaterChange(this._repeater=value);}getitems(){returnnull;}setitems(value){this.invalidate();}_onRepeaterChange(repeater){this.invalidate();}invalidate(){if(!this.needsRender&&this.connected){this.needsRender=true;Promise.resolve().then(()=>{this.needsRender=false;render(this.render(),this.shadowRoot);});}}render(){returnhtml`${this.repeater()}`;}}customElements.define('shadow-repeat',ShadowRepeat);