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 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.html files - 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?!),
• semistandard linting, etc.

About Web Components.

See also: web-vitals-element.

Usage

Available on esm.sh, Unpkg and Skypack CDNs. Note, templates can't currently be accessed from Skypack.

<my-skip-link></my-skip-link><my-optionstemplate-host="unpkg.com"></my-options><scriptsrc="https://cdn.skypack.dev/ndf-elements?min"
type="module" asynccrossorigin></script>

Dynamic import

Dynamically import just the custom elements you want, using an importmap.

HTML:

<my-live-bridgeevent="click" message="Hello world!"><paria-live="polite"></p><p><button>Click me!</button></p></my-live-bridge><scripttype="importmap">{"imports": {"my-elements": "https://unpkg.com/ndf-elements@^1/i.js"},"myElements": {"use": ["my-live-bridge","my-dev-warning"]}}</script><scripttype="module">import'my-elements';</script>

Legacy custom import

Dynamically import just the custom elements you want.

importcustomImportfrom'https://unpkg.com/ndf-elements@^1/custom.js';constMOD=awaitcustomImport('my-star-rating, my-skip-link');

Then:

<my-skip-link></my-skip-link><my-star-rating></my-star-rating>

License

• License: MIT.