My Elements

A collection of useful custom elements (Web Components).

• nfreear.github.io/elements/demo
• codepen.io/collection/mrpzOQ

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.html files,
• 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?!),
• semistandard linting, 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/ndf-elements@1.5.0/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.