nfreear
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 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
<template>in.tpl.htmlfiles - DEPRECATED), - 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>Dynamic import
Dynamically import just the custom elements you want, using an importmap.
HTML:
<my-live-bridge event="click" message="Hello world!">
<p aria-live="polite"></p>
<p><button>Click me!</button></p>
</my-live-bridge>
<script type="importmap">
{
"imports": {
"my-elements": "https://unpkg.com/ndf-elements@^1/i.js"
},
"myElements": {
"use": [ "my-live-bridge", "my-dev-warning" ]
}
}
</script>
<script type="module"> import 'my-elements'; </script>Legacy custom import
Dynamically import just the custom elements you want.
import customImport from 'https://unpkg.com/ndf-elements@^1/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.
"A fast, global content delivery network for everything on npm"
"A JavaScript Delivery Network for modern web apps"