https://github.com/t2ym/shadow-repeat
Repeat slotted elements in shadow DOM
https://github.com/t2ym/shadow-repeat
lit-html shadow-dom
Last synced: over 1 year ago
JSON representation
Repeat slotted elements in shadow DOM
- Host: GitHub
- URL: https://github.com/t2ym/shadow-repeat
- Owner: t2ym
- License: other
- Created: 2019-04-23T08:21:27.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-23T08:37:10.000Z (about 7 years ago)
- Last Synced: 2024-10-29T14:00:03.687Z (over 1 year ago)
- Topics: lit-html, shadow-dom
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/shadow-repeat)
[](https://www.webcomponents.org/element/shadow-repeat)
# ``
## Repeat slotted elements in shadow DOM
- `repeater` property is a function returning `TemplateResult` with `` 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
```javascript
import { html } from 'lit-html/lit-html.js';
import { repeat } from 'lit-html/directives/repeat.js';
html`
repeat(this.items, (item, index) => html``)}
.items=${this.items}>
${repeat(this.items, (item, index) => index, (item, index) => html``)}
`;
```
## Install
```sh
npm install shadow-repeat
```
## Import
```javascript
import 'shadow-repeat/shadow-repeat.js';
```
## [Full Source Code](https://github.com/t2ym/shadow-repeat/blob/master/shadow-repeat.js)
```javascript
/**
@license https://github.com/t2ym/shadow-repeat/blob/master/LICENSE.md
Copyright (c) 2019, Tetsuya Mori . All rights reserved.
*/
import {html, render} from 'lit-html/lit-html.js';
/**
* element to repeat items in Shadow Root via slot elements
*
* Usage:
* repeat(this.items, (item, index) => html``)} .items=${this.items}>
*
* ${repeat(this.items, (item, index) => index, (item, index) => html``)}
*
*
* @customElement
*/
export class ShadowRepeat extends HTMLElement {
static get is() {
return 'shadow-repeat';
}
constructor() {
super();
this.attachShadow({mode: 'open'});
}
connectedCallback() {
this.connected = true;
this.invalidate();
}
disconnectedCallback() {
this.connected = false;
}
get repeater() {
return this._repeater;
}
set repeater(value) {
this._onRepeaterChange(this._repeater = value);
}
get items() {
return null;
}
set items(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() {
return html`${this.repeater()}`;
}
}
customElements.define('shadow-repeat', ShadowRepeat);
```
## License
[BSD-2-Clause](https://github.com/t2ym/shadow-repeat/blob/master/LICENSE.md)