Web Components as Progressive Enhancement


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>

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:

  1. Web components require JavaScript to render . This means that until the JavaScript is downloaded, parsed, and run, no textarea is displayed. Instead “Here is my textarea content” is displayed as an unstyled string. If a user has JavaScript disabled, or the JavaScript fails to load, the textarea just won’t work.
  2. The textarea element 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 name, id, and rows to the actual textarea element that my JavaScript renders. I’d also need to add all of the textarea JavaScript APIs to my custom element (.value, .is-valid, etc.)

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>

This is a little more verbose, but it gets me the best of both worlds. Before JavaScript loads I have a fully functioning textarea. After JavaScript loads my 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>

You can play with the finished component below:




Previous Article

Coastal Stakeholders Urge Decisionmakers to Advance Critical Restoration Projects

Next Article

5 tips to help your clients (and you) have an awesome project

Related Posts