/elements

A collection of useful custom elements.

Primary LanguageJavaScriptMIT LicenseMIT

Node.js CI NPM package

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.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.