Web components through the eyes of a newcomer

A presentation at Decoupled Days 2021 by Brian Perry

Component based approaches to front end development have taken over the web. From conceptual approaches like Atomic Design, to component based frameworks like React and Vue, this perspective on web development is unlikely to fall out of favor any time soon. And like many others, I love it.

There is however, one component related technology that has eluded me: web components. Web components are of a set of web APIs and standards that can be used to create custom and reusable HTML elements. A custom element that isn’t tied to a specific framework and is supported across all modern browsers truly sounds like component utopia. Yet somehow, native web components still haven’t become a major part of my front end toolset. With web component adoption increasing, it seemed like time to better understand why.

This session recounts the highs, lows, and surprises of my experience as a newcomer to web components, including:

  • Key technologies including custom elements and the shadow DOM
  • Creating web components using the core API
  • Creating web components with the help of a library
  • Styling web components
  • Application state and web components
  • Using web components with frameworks like Angular, Vue and React
  • My newfound and slightly more educated outlook on web components

Code

The following code examples from the presentation can be tried out live.

Resources

The following resources were mentioned during the presentation or are useful additional information.