My Custom Elements | Nick Freear’s blog

For a while I’ve been working on a suite of custom elements. Custom elements are a standards-based way to extend HTML. A <custom-element> could encapsulate a user-interface component or custom form-field like <my-star-rating>, it could purely encapsulate a behaviour like <my-keyboard-control>. The possibilities are endless!

So I’m getting my ass in gear, and explaining the what and the why …

Why?

A colleague asked me “why?” recently, which got me thinking … I’m motivated by a few different factors. In no particular order:

Curiosity … wanting to play and experiment,
Develop things useful for other projects, for example this blog!
To push boundaries,
Explore the possibilities and limitations, for example in relation to accessibility,
Tied in with other experiments, for example, relating to readable fonts.

Where?

If you’re impatient to get started:

What?

You’ve got the experimental — <my-star-rating>, <my-font>, <my-page>,
Things that are useful on my blog — <my-analytics>, <my-busy-spinner>, <my-feed>, <my-font>, <my-gaad-widget>, <my-skip-link>,
Some are overtly accessibility-focussed elements — <my-skip-link> and <my-keyboard-control>,

And, some are just … because — <my-map> anyone?

How?

To load all elements, purely in the HTML page, simply:

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

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

<script src="https://nfreear.github.io/elements/index.js" type="module"></script>

Or to import just a handful of elements:

import customImport from 'https://nfreear.github.io/elements/custom.js';

await customImport('my-skip-link, my-map');

Then:

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

<my-map
  lat="51.505"
  long="-0.09"
  zoom="13"
  geojson="path/to/landmarks.json"
>A map showing some landmarks in London, UK</my-map>

The code uses ES modules throughout, with semistandard linting. It should play well with build tools and other custom element libraries.

What’s next?

It’s high time I published another version on Npmjs.com. Tidying and tweaking. I don’t have big plans at present — I’d love to hear what you think.

I’m @[email protected].