Gracefully degrading a Custom Element (or Polymer element)

Question

A number of developers have been wondering how graceful degradation should be approached in custom elements (or Polymer elements). This is for the use-case where either polyfills are not being used, Web Components are not supported or JavaScript is simply switched off.

Does anyone have thoughts on how this should be done?

Answer 1

There are two types of custom elements we're usually interested in adding support for graceful degradation to: Custom Elements that extend native HTML tags and Custom Elements which do not.

Custom Elements support natively extending elements already baked into the platform (e.g <button>, <input>). One way of doing this is using the is syntax. So, if you're extending a built-in, I believe the most direct way to ensure graceful degradation is to use the is syntax as follows: <button is="my-button"> rather than <my-button></my-button>.

Some examples of where I could see this working well are:

Fancy input fields:

<input is="fancy-input" type="text" value="So fancy">

Custom video players:

<video is="custom-player" src="amazeballs.mp4">

Music visualizers:

<audio is="music-visualizer" src="track.ogg">

This way if a browser without Custom Element cannot understand the is syntax, the element being extending should still work with a degraded experience.

What about Custom Elements where you are not extending a specific built-in? For example: <my-preload-animation>.

One approach I've been taking to this is specifying fallback content in the Light DOM:

<my-preload-animation>
  Loading...
</my-preload-animation>

If a browser without Custom Element support interprets the tag as HTMLUnknownElement, the fallback (a loading message) will still be rendered. This (appears) to work for simple elements.

For more complex ones (e.g if you're making use of <content>/<shadow> in your element), I remove the fallback via script when my custom element is upgraded.