Weeknote 14 - Shadows and DOMs
There’s an interesting way to read that title and a boring way. Unfortunately the boring one is correct.
Work #
I’m not going to get into the specifics of my work project until I’m actually happy with the state of it (so, possibly never).
But one issue I’ve encountered has to do with Web Components which makes it relevant to the ongoing debate about, well, web components and whether they’re worth using in web development.
For my current project I went all in on web components, not using Polymer or Stencil or anything like that but instead using lightweight components built with lit-html and haunted.
For the most part it’s been great. No compile stage is necessary during dev. Everything is very lightweight and fast. Hooks are great—I can see why they’re taking the React world by storm.
—So, all good, right?
Well, sort of. Custom elements are nice, but aren’t really any better or faster than pure function-based components. Thankfully haunted let’s you make ‘virtual’ function-based components. Which makes custom elements an only occasionally handy thing mostly useful for interoperable leaf nodes and ready-made features like file-drop and pinch-zoom.
That isn’t exactly useless but it isn’t the world-changing transformation of web dev Google has been pitching.
I really do like custom elements. They’re neat, just a little bit more niche than expected.
—But, the Shadow DOM is cool, right?
Scoped CSS is awesome. Being able to use scoped CSS with your components is an amazing boon to CSS coding. If we had scoped CSS without the Shadow DOM baggage that would indeed transform web dev, probably be even a bigger revolution than the introduction of CSS Grid or custom properties.
But we don’t have baggage-free scoped CSS. We have the Shadow DOM which suffers from a number of things that actually make web dev harder not easier:
- No server rendering ever
- Focus-handling is broken for a lot of use cases. It sort of works in Chrome but even then it breaks all existing focus management scripts. So forget about reusing all those nice, battle-tested accessible dialogue boxes, menu buttons, etc.
- Polyfilling is heavyweight and
lit-htmlintegration is a bit painful. - Selection APIs are basically unspecified and every implementation works differently. Firefox’s implementation can be made to work in a similar way to Chrome’s. And there is a very hacky way to support Safari. This will be solved long term using a new API. But in the meantime we have two non-standard implementations people are coding against that are likely to break in the future. And nothing that requires text selection is going to work reliably in a
shadowRootin Safari. Rich text editors? Broken. Annotation tools. Broken.
That’s just what came up after a couple of weeks of development using Shadow DOM in my components. Any one of them is a deal-breaker for most projects. Together they mean that it’s really hard to recommend using Shadow DOM unless you really, really need one of the features it provides.
In our case, there is one component that absolutely, positively, needs style scoping to such a degree that I’m more than willing to work around its limitations. Everywhere else I’ve used it, the liabilities that came with the shadowRoot have substantially outweighed the benefit of scoped styles.
lit-html uses the <template> tag behind the scenes.
That leaves Web Components with an overall score of 1 out of 3. Could be worse? Not exactly world-changing.
lit-html and haunted are great, though. lighterhtml and hyperhtml, two other template-literal DOM renderers are also great. One of these days I’ll write about how I ended up on the lit-html side of things for this project. (The short version: haunted tipped the scale in lit-html’s favour)
iPad Pro #
After my re-evaluation of the Apple ecosystem the other day, I decided to upgrade from my iPad Air 2 to an 11" iPad Pro.
The iPad Air 2 is great. I’ve used it for all my digital reading (feeds, ebooks, PDFs) over the past five years.
But the iPad Pro with the smart keyboard and pencil is, in hardware terms, easily the best computing device I’ve used. It’s only held back by the OS but the upcoming iPadOS release is set to address most of my issues.
If I weren’t a web developer, I have no doubt that an iPad Pro with iPadOS 13 would let me do my job with ease.
The web dev thing is a huge hurdle with this device still.
Leisure #
Not much of that going on last week. Too distracted by work, French classes, and the new iPad Pro. Only read one Courtney Milan novella. (Not counting the tonnes of technical stuff I read.)