{"id":17965352,"url":"https://github.com/t2ym/shadow-repeat","last_synced_at":"2025-04-03T20:17:51.157Z","repository":{"id":57357585,"uuid":"182968408","full_name":"t2ym/shadow-repeat","owner":"t2ym","description":"Repeat slotted elements in shadow DOM","archived":false,"fork":false,"pushed_at":"2019-04-23T08:37:10.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-29T14:00:03.687Z","etag":null,"topics":["lit-html","shadow-dom"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/t2ym.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-23T08:21:27.000Z","updated_at":"2019-04-23T08:37:12.000Z","dependencies_parsed_at":"2022-09-26T16:33:19.462Z","dependency_job_id":null,"html_url":"https://github.com/t2ym/shadow-repeat","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t2ym%2Fshadow-repeat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t2ym%2Fshadow-repeat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t2ym%2Fshadow-repeat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t2ym%2Fshadow-repeat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/t2ym","download_url":"https://codeload.github.com/t2ym/shadow-repeat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247070927,"owners_count":20878586,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lit-html","shadow-dom"],"created_at":"2024-10-29T12:41:53.723Z","updated_at":"2025-04-03T20:17:51.127Z","avatar_url":"https://github.com/t2ym.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/v/shadow-repeat.svg)](https://www.npmjs.com/package/shadow-repeat)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/shadow-repeat)\n\n# `\u003cshadow-repeat\u003e`\n\n## Repeat slotted elements in shadow DOM\n\n- `repeater` property is a function returning `TemplateResult` with `\u003cslot\u003e` elements\n  - The repeater can be selective and sortable\n- `items` write-only property is optional to trigger redrawing on items changes\n  - Note that changes of items of `items` are not watched\n\n```javascript\n  import { html } from 'lit-html/lit-html.js';\n  import { repeat } from 'lit-html/directives/repeat.js';\n\n  html`\n    \u003cshadow-repeat \n      .repeater=${() =\u003e repeat(this.items, (item, index) =\u003e html`\u003cslot name=${index}\u003e\u003c/slot\u003e`)}\n      .items=${this.items}\u003e\u003c!-- items write-only property is optional to trigger redrawing --\u003e\n      \u003c!-- stock views in Light DOM and show selected views in shadow DOM via slot names as keys --\u003e\n      ${repeat(this.items, (item, index) =\u003e index, (item, index) =\u003e html`\u003citem-element slot=${index} .data=${item} discard-on-disconnect\u003e\u003c/item-element\u003e`)}\n    \u003c/shadow-repeat\u003e`;\n```\n\n## Install\n\n```sh\nnpm install shadow-repeat\n```\n\n## Import\n\n```javascript\nimport 'shadow-repeat/shadow-repeat.js';\n```\n\n## [Full Source Code](https://github.com/t2ym/shadow-repeat/blob/master/shadow-repeat.js)\n\n```javascript\n/**\n@license https://github.com/t2ym/shadow-repeat/blob/master/LICENSE.md\nCopyright (c) 2019, Tetsuya Mori \u003ct2y3141592@gmail.com\u003e. All rights reserved.\n*/\nimport {html, render} from 'lit-html/lit-html.js';\n\n/**\n * \u003cshadow-repeat\u003e element to repeat items in Shadow Root via slot elements\n *\n * Usage:\n *  \u003cshadow-repeat .repeater=${() =\u003e repeat(this.items, (item, index) =\u003e html`\u003cslot name=${index}\u003e\u003c/slot\u003e`)} .items=${this.items}\u003e\u003c!-- items property is optional to trigger redrawing --\u003e\n *    \u003c!-- stock views in Light DOM and show selected views in shadow DOM via slot names as keys --\u003e\n *    ${repeat(this.items, (item, index) =\u003e index, (item, index) =\u003e html`\u003citem-element slot=${index} .data=${item} discard-on-disconnect\u003e\u003c/item-element\u003e`)}\n *  \u003c/shadow-repeat\u003e\n *\n * @customElement\n */\nexport class ShadowRepeat extends HTMLElement {\n  static get is() {\n    return 'shadow-repeat';\n  }\n  constructor() {\n    super();\n    this.attachShadow({mode: 'open'});\n  }\n  connectedCallback() {\n    this.connected = true;\n    this.invalidate();\n  }\n  disconnectedCallback() {\n    this.connected = false;\n  }\n  get repeater() {\n    return this._repeater;\n  }\n  set repeater(value) {\n    this._onRepeaterChange(this._repeater = value);\n  }\n  get items() {\n    return null;\n  }\n  set items(value) {\n    this.invalidate();\n  }\n  _onRepeaterChange(repeater) {\n    this.invalidate();\n  }\n  invalidate() {\n    if (!this.needsRender \u0026\u0026 this.connected) {\n      this.needsRender = true;\n      Promise.resolve().then(() =\u003e {\n        this.needsRender = false;\n        render(this.render(), this.shadowRoot);\n      });\n    }\n  }\n  render() {\n    return html`${this.repeater()}`;\n  }\n}\ncustomElements.define('shadow-repeat', ShadowRepeat);\n```\n\n## License\n\n[BSD-2-Clause](https://github.com/t2ym/shadow-repeat/blob/master/LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft2ym%2Fshadow-repeat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ft2ym%2Fshadow-repeat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft2ym%2Fshadow-repeat/lists"}