Web Components 2020

Web Components is standard technology (as opposed to libraries, frameworks and tools that come and go) for web development.

It allows you to simply write custom html elements in JavaScript. Such components become framework-independent and can be shared and reused. They are simple to use. In your html-file, simply:

<html>
  ...
  <script src="wc-blink.js"></script>
  ...
  <wc-blink>This should blink</wc-blink>
  ...
</html>

The code of wc-blink is quite simple (view), I stole it (here) and modified it slightly.

Another advantage of Web Components is the Shadow DOM allowing private CSS: the styles wont escape, override or be overridden.

This technology has been around for a while… but the bad news… it still does not work with Microsoft browsers (IE11, Edge).

I wrote a simple demo page (link).

With Polyfill you can use it with Edge. IE11 seems to be out of luck because the keyword class from ES6 must work (see code for wc-blink above) and this is not simply a matter of polyfill. There is technology to compile/transpile stuff to ES5 but in that case I can rather keep building my components in Vue.js.

Conclusion

It is actually sad that work that goes into web browser standards (to make it possible to build applications and components for the web in a good way) gets delayed by MS simply not supporting it.

I dont think web development should be more complicated than including scripts and writing html. Web Components allow just that.

If you need to support IE11, simply ignore Web Components until you don’t need to support IE11 anymore.

If you are fine supporting just Edge, there are ways not to need to include the 117kb polyfill for everyone.

I can not afford to break IE11 at this point, and neither am I willing to transpile stuff. I stick to Vue.js components.

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.