Web Components are Awesome

Web Components are a set of web technologies that allow you to create your own HTML elements. They were first introduced over 10 years ago, in 2011, but were and still are shadowed by libraries like Angular, React, and Vue. However, they shouldn't be!

Here's why they are great and you should use them:
  • Web technologies that make up Web Components are based on official web specifications (W3C and WHATWG).
  • They are widely supported and their support is growing still.
  • Because they are standard they fit nicely into the existing ecosystem, are well-known, and will be supported and continue working longer than any library.
  • They allow greater code reuse—you can use anyone's component and anyone can use your component. With libraries you also need the library (and the correct version too!) to share components.
  • They work out of the box.
  • They are easy to use because it's just HTML and JavaScript.
  • They are very well documented.
What do you need to get started? Not much.
  1. Basic knowledge of HTML and JavaScript.
  2. Some documentation (I like MDN Web Docs).
Any good libraries to use?
You don't need any, but you can always check out if an element you need already exists. For general, all-purpose elements, a special shout-out goes to GitHub's Web Component collection—an amazing collection of custom elements. Some elements, like the time-elements, are so wonderful and useful they should probably be supported by browsers by default!

You can see this page's source written in Touch and the config used.