Weaving web components in a bundler-free world 🏄

You have stumbled upon a story-driven workshop on web components.

Good luck, have fun!

Key takeaways

1. Web components let's us create custom HTML elements that look, smell and bark like regular HTML tags.
2. You can write custom elements without the use of libraries or frameworks.
3. There's no need for a JavaScript build step. Many small files caches well. Less building means less strain on the environment.
4. You can sprinkle custom elements on existing solutions, or you can go all-in and create rich web applications.
5. Working with browser APIs such as customElements.define() is perfectly doable despite it being a vast landscape with quirks abound. So, not so different from learning any web framework.
6. Vanilla JavaScript knowledge such as custom elements is appliable within, across and even without web frameworks.
7. Browser vendors and standards committees work very hard at backwards compatibility. Expect your Vanilla JavaScript code to be humming happily along after ten or twenty years.
8. See also the references page for useful reading.