Web components are a powerful tool for creating custom HTML elements, but you can run into challenges if you try to replace existing elements with web components. To get the best of both worlds, try wrapping existing elements in web components instead.
I learned this the hard way… On a few recent projects we’ve wanted to create an auto-expanding
textarea: When a user types its height would increase so that its content is never clipped.
I was tired of rewriting this behavior across projects and frameworks and began thinking through how it could be written as a reusable web component. My first draft of an API looked like this:
<elastic-textarea name="textarea-name" id="textarea-id" rows="4"> Here is my textarea content </elastic-textarea>Code language: HTML, XML (xml)
This is pretty sweet. Developers can use this exactly like the
textarea they’re already used to! But, as I was testing this out I noticed a couple of major downsides:
textareaelement has its own complex behavior, APIs, and accessibility behaviors. I’d need to recreate a lot of this from scratch for my component. I’d need to apply the
rowsto the actual
.is-valid, etc.) Footnote 2
We can avoid both of these drawbacks by wrapping and enhancing an existing element instead of replacing it. Here’s what that looks like:
<elastic-textarea> <textarea name="textarea-name" id="textarea-id" rows="4"> Here is my textarea content </textarea> </elastic-textarea>Code language: HTML, XML (xml)
textarea is progressively enhanced with additional functionality.
It could get a little tedious to wrap every
textarea on the page. To avoid this we could set the component up so it can wrap multiple
textareas and enhance all of them at once. This would allow you to wrap a whole form or page to enable this behavior:
<elastic-textarea> <textarea name="textarea-name" id="textarea-id" rows="2"> Here is my textarea content </textarea> <textarea name="textarea-2" id="textarea-id-2" rows="5"> Here is another textarea </textarea> </elastic-textarea>Code language: HTML, XML (xml)
You can play with the finished component below:
elastic-textarea component is a single example of how web components can be used for progressive enhancement, but there are tons of other potential use cases for this technique. Here are a couple other examples to check out for inspiration:
- Zach Leatherman created an excellent
details-utilscomponent that wraps and progressively enhances the
detailselement. (This was a big source of inspiration for my approach here.)
- I used this same technique to create a progressively enhanced image comparison component.
I’m a big fan of this strategy and I’m excited to create and share more progressively enhanced components. At Cloud Four we work on a lot of different projects for a lot of different clients, and I’ve found myself rewriting the same functionality across several projects. Next time I catch myself rewriting the same component logic for the third or fourth time I’m going to make it a web component so I don’t have to write it a fifth time.
By packaging these chunks of interactive logic as custom elements, we can make them easy to share and reuse across projects and frameworks. By enhancing native HTML instead of replacing it, we can provide a solid baseline experience, and add progressive enhancement as the cherry on top.
- There are various libraries that allow server side rendering of web components, but they usually require you to buy into a specific web component framework, and/or modify your build steps. These are useful tools for individuals projects, but don’t work as well for creating easily shareable components. Return to the text before footnote 1
- There’s a spec to allow extending existing elements but it looks unlikely that Safari will adopt it. On some projects, recreating element APIs can have a big payoff but it’s a lot of work if you’re just trying to add a little functionality to an existing element. Return to the text before footnote 2