Making a Web Component

I’ve been interested in learning more about web components and learning their strengths and weaknesses, where they are and aren’t a good fit etc.

My plan is to take on the final boss of components a date picker and slowly build up from an MVP to something that is accessible and maybe share it as an npm package if I get that far.

During this project there are several thing I’m interested in trying out:

Temporal api

This is the new javascript standard for dates and is now supported in Chrome and Firefox. I think this should prove useful whilst making a date picker and should be a huge improvement on the existing Date() api.

Intl api

Rather than having to use some kind of translation system I’m hoping the Intl api will be able to help me translate day and month names, relying on a browser built in for this should also reduce bundle size.

Popover api

This is one of the most exciting CSS developments to happen recently and again should be able to not use a library and reduce the bundle size.

Web Components

I don’t have a huge amount of experience in web components so I hope to learn a lot on this front. Being primarily a React developer I’m also looking forward to using more “vanilla” javascript.

Using Web Components in different frameworks

I’m interested to see how it is to use Web Components in different frameworks, primarily React which with version 19 has improved support for Web Components and also Svelte.

Testing Web Components

At the moment this is a bit of an unknown to me but as far as I know it’s not really possible to test Web Components in JSDOM for example. So I’m interested in finding out the different approaches to testing Web Components.