My Web Components

A collection of experimental Web Components.

• nfreear.github.io/web-components/demo

Rationale

• Experimental, particularly <my-page>, <my-nav> which are probably not for production !!
• Should be usable 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.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.

Usage

<my-skip-link></my-skip-link>


<my-options template-host="github.io"></my-options>

<script src="https://nfreear.github.io/web-components/index.js"
  type="module" async crossorigin
></script>

Custom import

import { customImport } from 'https://nfreear.github.io/web-components/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