Displaying HTML web components

Those HTML web components I made for date inputs are very simple. All they do is slightly extend the behaviour of the existing input elements.

This would be the ideal use-case for the is attribute:

Alas, Apple have gone on record to say that they will never ship support for customized built-in elements.

So instead we have to make HTML web components by wrapping existing elements in new custom elements:

The end result is the same. Mostly.

Because there���s now an additional element in the DOM, there could be unexpected styling implications. Like, suppose the original element was direct child of a flex or grid container. Now that will no longer be true.

So something I���ve started doing with HTML web components like these is adding something like this inside the connectedCallback method:

connectedCallback() { this.style.display = 'contents'; ���}

This tells the browser that, as far as styling is concerned, there���s nothing to see here. Move along.

Or you could (and probably should) do it in your stylesheet instead:

input-date-future { display: contents;}

Just to be clear, you should only use display: contents if your HTML web component is augmenting what���s within it. If you add any behaviours or styling to the custom element itself, then don���t add this style declaration.

It���s a bit of a hack to work around the lack of universal support for the is attribute, but it���ll do.