My Custom Elements

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 …


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.


If you’re impatient to get started:


  • 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?


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


<my-options template-host=""></my-options>

<script src="" type="module"></script>

Or to import just a handful of elements:

import customImport from '';

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



>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 Tidying and tweaking. I don’t have big plans at present — I’d love to hear what you think.

I’m @[email protected].

'SM' comments disabled.

'ID' comments disabled.