Responsible Web Components

Bruce has written a great article called On the accessibility of web components. Again. In it, he takes issue with the tone of a recent presentation on web components, wherein Dimitri Glazkov declares:

Custom elements is really neat. It basically says, “HTML it’s been a pleasure”.

Bruce paraphrases this as:

Bye-bye HTML; you weren’t useful enough. Hello, brave new world of custom elements.

Like Bruce, I’m worried about this year-zero thinking. First of all, I think it’s self-defeating. In my experience, the web technologies that succeed are the ones that build upon what already exists, rather than sweeping everything aside. Evolution, not revolution.

Secondly, web components—or more specifically, custom elements—already allow us to extend existing HTML elements. That means we can use web components as a form of progressive enhancement, turbo-charging pre-existing elements instead of creating brand new elements from scratch. That way, we can easily provide fallback content for non-supporting browsers.

But, as Bruce asks:

Snarking aside, why do so few people talk about extending existing HTML elements with web components? Why’s all the talk about brand new custom elements? I don’t know.

Patrick leaves a comment with his answer:

The issue of not extending existing HTML elements is exactly the same that we’ve seen all this time, even before web components: developers who are tip-top JavaScripters, who already plan on doing all the visual feedback/interactions (for mouse users like themselves) in script anyway themselves, so they just opt for the most neutral starting point…a div or a span. Web components now simply gives the option of then sweeping all that non-semantic junk under a nice, self-contained rug.

That’s a depressing thought. But it might very well be true.

Stuart also comments:

Why aren’t web components required to be created with is=“some-component” on an existing HTML element? This seems like an obvious approach; sure, someone who wants to make something meaningless will just do <div is=my-thing> or (worse) <body is=my-thing> but it would provide a pretty heavy hint that you’re supposed to be doing things The Right Way, and you’d get basic accessibility stuff thrown in for free.

That’s a good question. After all, writing <new-shiny></new-shiny> is basically the same as <span is=“new-shiny”></span>. It might not make much of a difference in the case of a span or div, but it could make an enormous difference in the case of, say, form elements.

Take a look at IBM’s library of web components. They’re well-written and they look good, but time and time again, they create new custom elements instead of extending existing HTML.

Although, as Bruce points out:

Of course, not every new element you’ll want to make can extend an existing HTML element.

But I still think that the majority of web components could, and should, extend existing elements. Addy Osmani has put together some design principles for web components and Steve Faulkner has created a handy punch-list for web components, but I’d like to propose that a fundamental principle of good web component design should be: “Where possible, extend an existing HTML element instead of creating a new element from scratch.”

Rather than just complain about this kind of thing, I figured I’d try my hand at putting it into practice…

Dave recently made a really nice web component for playing back podcast audio files. I could imagine using something like this on Huffduffer. It’s called podcast-player and you use it thusly:

<podcast-player src="my.mp3"></podcast-player>

One option for providing fallback content would be to include it within the custom element tags:

<podcast-player src="my.mp3">
    <a href="my.mp3">Listen</a>

That would require minimum change to Dave’s code. I’d just need to make sure that the fallback content within podcast-player elements is removed in supporting browsers.

I forked Dave’s code to try out another idea. I figured that if the starting point was a regular link to the audio file, that would also be a way of providing fallback for browsers that don’t cut the web component mustard:

<a href="my.mp3" is="podcast-player">Listen</a>

It required surprisingly few changes to the code. I needed to remove the fallback content (that “Listen” text), and I needed to prevent the default behaviour (following the href), but it was fairly straightforward.

However, I’m sure it could be improved in one of two ways:

  1. I should probably supply an ARIA role to the extended link. I’m not sure what would be the right one, though …menu or menubar perhaps?
  2. Perhaps a link isn’t the right element to extend. Really I should be extending an audio element (which itself allows for fallback content). When I tried that, I found it too hard to overcome the default browser rules for hiding anything between the opening and closing tags. But you’re smarter than me, so I bet you could create <audio is=“podcast-player”>.

Fork the code and have at it.

Have you published a response to this? :



# Liked by Arantxa Hernandez on Monday, December 8th, 2014 at 6:44am

# Liked by Luca Salvini on Monday, December 8th, 2014 at 7:27am

# Liked by Eric Eggert on Monday, December 8th, 2014 at 8:12am

# Liked by Aral Balkan on Monday, December 8th, 2014 at 10:28am

# Liked by Ruben Bos on Thursday, June 16th, 2016 at 3:19pm

Previously on this day

11 years ago I wrote Feedback loopy

Gonna, shonna, wonna.

13 years ago I wrote Hauptstadt

I feel like I’m in a Wim Wenders film.

13 years ago I wrote Flash On The Beach: day two

Good stuff from start to finish.

14 years ago I wrote Hopping to Catalonia

Hold my calls - I’ll be incommunicado for the next few days. I’m planning to spend the weekend in Barcelona.

14 years ago I wrote Meta-parody

I tend to avoid reading Jakob Nielsen. This time, I made the mistake of following a link from somebody else, started reading through Why Ajax Sucks (Most of the Time) and, before I was half-way through, I was fuming at the inaccuracies and sweeping genera

15 years ago I wrote Another man's tweaks

Pete has made some nifty little additions to his site. He’s added some toggle-able layers for his music and his photos (the Listening and Flickr links, respectively). They’re kind of like Dunstan’s panorama information panel. Very nice.

16 years ago I wrote Primitive Piracy

As I mentioned earlier, I’ve been enjoying the extended edition DVD of The Two Towers. I’ve also previously made mention of the fact that I’ve been using my iSight as a webcam.

18 years ago I wrote {fray} - the tree

If, like me, you are subscribed to the {fray} mailing list, you’ll have received an email today pointing to a re-run of an old seasonal story - the tree:

18 years ago I wrote Season's Greetings 2001

Lance Arthur has his virtual Christmas card up already.