https://github.com/nfreear/elements
A collection of useful custom elements.
https://github.com/nfreear/elements
custom-elements es6 web-components
Last synced: 3 months ago
JSON representation
A collection of useful custom elements.
- Host: GitHub
- URL: https://github.com/nfreear/elements
- Owner: nfreear
- License: mit
- Created: 2021-11-29T22:51:19.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2026-02-11T13:13:44.000Z (4 months ago)
- Last Synced: 2026-03-05T20:30:01.996Z (3 months ago)
- Topics: custom-elements, es6, web-components
- Language: JavaScript
- Homepage: https://nfreear.github.io/elements/demo
- Size: 2.57 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
- Citation: CITATION.cff
Awesome Lists containing this project
README
[![Node.js CI][ci-img]][ci]
[![NPM package][npm-img]][npm]
# My Elements #
A collection of useful custom elements (Web Components).
* [nfreear.github.io/elements/demo][demo]
* [codepen.io/collection/mrpzOQ][pen]
## Rationale ##
* Some experimental, particularly ``, `` which are probably not for production !!
* Should be usable with or without a build system, minimalist,
* Accessible and usable for end-users - use WAI-ARIA where appropriate!
* Simple for developers to try out,
* ES6 classes in JS files (with associated HTML + CSS in `` in `.tpl.html` files - DEPRECATED),
* Self-contained where possible - SVG icons embedded in ``, except `` (Leaflet.js)
* Use shadow DOM where possible - see notes on forms (below?)
* A playground, plus some components that I will use in my blog etc.
* Demo page, per component (almost?!),
* `semistandard` linting, etc.
About [Web Components][mdn].
See also: [web-vitals-element][].
## Usage
Available on [esm.sh][], [Unpkg][] and [Skypack][] CDNs. Note, templates can't currently be accessed from Skypack.
```html
```
## Dynamic import
Dynamically import just the custom elements you want, using an `importmap`.
HTML:
```html
Click me!
{
"imports": {
"my-elements": "https://unpkg.com/ndf-elements@^1/i.js"
},
"myElements": {
"use": [ "my-live-bridge", "my-dev-warning" ]
}
}
import 'my-elements';
```
## Legacy custom import
Dynamically import just the custom elements you want.
```js
import customImport from 'https://unpkg.com/ndf-elements@^1/custom.js';
const MOD = await customImport('my-star-rating, my-skip-link');
```
Then:
```html
```
## License
* License: [MIT][].
[ci]: https://github.com/nfreear/elements/actions/workflows/node.js.yml
[ci-img]: https://github.com/nfreear/elements/actions/workflows/node.js.yml/badge.svg
[demo]: https://nfreear.github.io/elements/demo/
[pen]: https://codepen.io/collection/mrpzOQ
[mit]: https://nfreear.mit-license.org/2021-2026
[npm]: https://www.npmjs.com/package/ndf-elements
[npm-img]: https://img.shields.io/npm/v/ndf-elements
[unpkg]: https://unpkg.com
"A fast, global content delivery network for everything on npm"
[up-cdn]: https://unpkg.com/ndf-elements@1.1.0/index.js
[skypack]: https://cdn.skypack.dev
"A JavaScript Delivery Network for modern web apps"
[sp-cdn]: https://cdn.skypack.dev/ndf-elements
[esm.sh]: https://esm.sh/
[mdn]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
[web-vitals-element]: https://github.com/stefanjudis/web-vitals-element