{"id":24152281,"url":"https://github.com/nfreear/elements","last_synced_at":"2026-03-08T22:02:27.481Z","repository":{"id":42566950,"uuid":"433221150","full_name":"nfreear/elements","owner":"nfreear","description":"A collection of useful custom elements.","archived":false,"fork":false,"pushed_at":"2026-02-11T13:13:44.000Z","size":2699,"stargazers_count":2,"open_issues_count":30,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-05T20:30:01.996Z","etag":null,"topics":["custom-elements","es6","web-components"],"latest_commit_sha":null,"homepage":"https://nfreear.github.io/elements/demo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nfreear.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":"CITATION.cff","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-11-29T22:51:19.000Z","updated_at":"2026-02-11T13:13:47.000Z","dependencies_parsed_at":"2023-10-04T04:59:17.273Z","dependency_job_id":"ba793c3f-0761-453d-810b-8751247df5c6","html_url":"https://github.com/nfreear/elements","commit_stats":{"total_commits":174,"total_committers":2,"mean_commits":87.0,"dds":"0.011494252873563204","last_synced_commit":"c6c49add76efc4ef95bea476913acae37212c078"},"previous_names":["nfreear/web-components"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/nfreear/elements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfreear%2Felements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfreear%2Felements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfreear%2Felements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfreear%2Felements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nfreear","download_url":"https://codeload.github.com/nfreear/elements/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nfreear%2Felements/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30274876,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T20:45:49.896Z","status":"ssl_error","status_checked_at":"2026-03-08T20:45:49.525Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["custom-elements","es6","web-components"],"created_at":"2025-01-12T10:15:37.428Z","updated_at":"2026-03-08T22:02:27.476Z","avatar_url":"https://github.com/nfreear.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n[![Node.js CI][ci-img]][ci]\n[![NPM package][npm-img]][npm]\n\n# My Elements #\n\nA collection of useful custom elements (Web Components).\n\n* [nfreear.github.io/elements/demo][demo]\n* [codepen.io/collection/mrpzOQ][pen]\n\n## Rationale ##\n\n* Some experimental, particularly `\u003cmy-page\u003e`, `\u003cmy-nav\u003e` which are probably not for production !!\n* Should be usable with or without a build system, minimalist,\n* Accessible and usable for end-users - use WAI-ARIA where appropriate!\n* Simple for developers to try out,\n* ES6 classes in JS files (with associated HTML + CSS in `\u003ctemplate\u003e` in `.tpl.html` files - DEPRECATED),\n* Self-contained where possible - SVG icons embedded in `\u003ctemplate\u003e`, except `\u003cmy-map\u003e` (Leaflet.js)\n* Use shadow DOM where possible - see notes on forms (below?)\n* A playground, plus some components that I will use in my blog etc.\n* Demo page, per component (almost?!),\n* `semistandard` linting, etc.\n\nAbout [Web Components][mdn].\n\nSee also: [web-vitals-element][].\n\n## Usage\n\nAvailable on [esm.sh][], [Unpkg][] and [Skypack][] CDNs. Note, templates can't currently be accessed from Skypack.\n\n```html\n\u003cmy-skip-link\u003e\u003c/my-skip-link\u003e\n\n\n\u003cmy-options template-host=\"unpkg.com\"\u003e\u003c/my-options\u003e\n\n\u003cscript src=\"https://cdn.skypack.dev/ndf-elements?min\"\n  type=\"module\" async crossorigin\n\u003e\u003c/script\u003e\n```\n\n## Dynamic import\n\nDynamically import just the custom elements you want, using an `importmap`.\n\nHTML:\n```html\n\u003cmy-live-bridge event=\"click\" message=\"Hello world!\"\u003e\n  \u003cp aria-live=\"polite\"\u003e\u003c/p\u003e\n\n  \u003cp\u003e\u003cbutton\u003eClick me!\u003c/button\u003e\u003c/p\u003e\n\u003c/my-live-bridge\u003e\n\n\u003cscript type=\"importmap\"\u003e\n{\n  \"imports\": {\n    \"my-elements\": \"https://unpkg.com/ndf-elements@^1/i.js\"\n  },\n  \"myElements\": {\n    \"use\": [ \"my-live-bridge\", \"my-dev-warning\" ]\n  }\n}\n\u003c/script\u003e\n\n\u003cscript type=\"module\"\u003e import 'my-elements'; \u003c/script\u003e\n```\n\n## Legacy custom import\n\nDynamically import just the custom elements you want.\n```js\nimport customImport from 'https://unpkg.com/ndf-elements@^1/custom.js';\n\nconst MOD = await customImport('my-star-rating, my-skip-link');\n```\n\nThen:\n\n```html\n\u003cmy-skip-link\u003e\u003c/my-skip-link\u003e\n\n\u003cmy-star-rating\u003e\u003c/my-star-rating\u003e\n```\n\n## License\n\n* License: [MIT][].\n\n[ci]: https://github.com/nfreear/elements/actions/workflows/node.js.yml\n[ci-img]: https://github.com/nfreear/elements/actions/workflows/node.js.yml/badge.svg\n[demo]: https://nfreear.github.io/elements/demo/\n[pen]: https://codepen.io/collection/mrpzOQ\n[mit]: https://nfreear.mit-license.org/2021-2026\n[npm]: https://www.npmjs.com/package/ndf-elements\n[npm-img]: https://img.shields.io/npm/v/ndf-elements\n[unpkg]: https://unpkg.com\n  \"A fast, global content delivery network for everything on npm\"\n[up-cdn]: https://unpkg.com/ndf-elements@1.1.0/index.js\n[skypack]: https://cdn.skypack.dev\n  \"A JavaScript Delivery Network for modern web apps\"\n[sp-cdn]: https://cdn.skypack.dev/ndf-elements\n[esm.sh]: https://esm.sh/\n[mdn]: https://developer.mozilla.org/en-US/docs/Web/Web_Components\n[web-vitals-element]: https://github.com/stefanjudis/web-vitals-element\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnfreear%2Felements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnfreear%2Felements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnfreear%2Felements/lists"}