This great post by Mandy ticks all my boxes! It’s a look at the combinatorial possibilities of some of the lesser-known HTML elements: abbr, cite, code, dfn, figure, figcaption, kbd, samp, and var.
This really gets to the heart of one of the biggest benefits of HTML web components: composability. You can nest your regular markup inside multiple custom elements; something that is can’t do.
The other exciting approach doesn’t exist yet: custom attributes. Again, they’d be a great way of using composability to turbo-charge your existing HTML in all sorts of ways.
This is such a brilliant idea! Why not allow an img element inside video element in order to provide a responsive, accessible poster image?
I’m slapping my forehead—progressive web components is a perfect name for what I’ve been calling HTML web components. Why didn’t I think of that?
A Progressive Web Component is a native Custom Element designed in two layers: a base layer of HTML and CSS that renders immediately, without JavaScript, and an enhancement layer of JavaScript that adds reactivity, event handling, and more advanced templating.
This is a clever technique for a CSS/HTML only way of just-in-time loading of iframes using details and summary.
An excellent example of an HTML web component from Eric:
Extend HTML to do things automatically!
He layers on the functionality and styling, considering potential gotchas at every stage. This is resilient web design in action.
Some handy tips courtesy of Chris Ferdinandi.
Turning accessibility awareness into action with HTML.
HTML’s new `command` attribute on the `button` element could be a game-changer.
Naming custom elements, naming attributes, the single responsibility principle, and communicating across components.
You might want to use `display: contents` …maybe.