Journal tags:contents

ThoseHTML web components I made for date inputsare very simple. All they do is slightly extend the behaviour of the existinginputelements.

This would be the ideal use-case fortheisattribute:

<input is= "input-date-future" type= "date" >

Alas, Apple have gone on record to say thatthey willnevership support for customized built-in elements.

So instead we have to makeHTML web componentsby wrapping existing elements in new custom elements:

<input-date-future>
<input type= "date" >
<input-date-future>

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 theconnectedCallbackmethod:

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 usedisplay: contentsif your HTML web component is augmenting what’swithinit. 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 theisattribute, but it’ll do.

A few people on Twitter have asked about the table of contents for my new book about service workers,Going Offline.Fair enough—why not see the menu before placing your order?

1. Introducing Service WorkersDoes what is says on the tin. It also talks about switching to HTTPS.This chapter is online atA List Apartso you can try before you buy.
2. Preparing for OfflineThis chapter talks about how you register a service worker, and introduces the concept of promises in JavaScript.
3. Making Fetch HappenYes, this chapter title isaMean Girlsreference;fight me. The chapter explainsfetchevents and shows how a service worker can intercept them.
4. Cache Me if you CanThis puntastic chapter is all about caching, and shows you can use caches in your service worker script.
5. Service Worker StrategiesThis is the heart of the book, where you get decide what kind of strategy you want to implement—when to go to the network, when to go a cache, and so on. And as a last resort, you can have a custom offline page.
6. Refining Your Service WorkerBuilding on the previous chapter, this one looks at how you can use different strategies for different kinds of files—images, pages, etc.
7. Tidying UpThis chapter is about good service worker hygiene like deleting old caches. It also introduces some more coding style options.
8. The Offline ExperienceBy this chapter, the service worker script is done. But there’s still plenty of room for enhancements on that custom offline page, including the use of offline storage.
9. Progressive Web AppsThe book finishes with an explanation of progressive web apps, and a step-by-step guide to creating your own web app manifest.

Sound good?Pre-order your copy of the book nowand you’ll have it in your hands ten days from now.