ndf-elements
v1.6.0
Published
A collection of useful custom elements.
Downloads
6
Maintainers
nfreearReadme
My Elements
A collection of useful custom elements (Web Components).
Rationale
- Some experimental, particularly
<my-page>,<my-nav>which are probably not for production !! - Should be usable without (or with) 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
<template>in.tpl.htmlfiles, - Self-contained where possible - SVG icons embedded in
<template>, except<my-map>(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?!),
semistandardlinting, etc.
About Web Components.
See also: web-vitals-element.
Usage
Available on Unpkg and Skypack CDNs. Note, templates can't currently be accessed from Skypack.
<my-skip-link></my-skip-link>
<my-options template-host="unpkg.com"></my-options>
<script src="https://cdn.skypack.dev/ndf-elements?min"
type="module" async crossorigin
></script>Custom import
import customImport from 'https://nfreear.github.io/elements/custom.js';
// import customImport from 'https://unpkg.com/[email protected]/custom.js';
const MOD = await customImport('my-star-rating, my-skip-link');Then:
<my-skip-link></my-skip-link>
<my-star-rating></my-star-rating>License
- License: MIT.