3 Vanilla web components

"Vanilla" web components are web components built directly on web component standards, without relying on helper libraries such as Lit, Stencil, FAST, or wrec. These libraries are layered on top of the same underlying browser APIs used by vanilla web components. So developing a solid understanding of the vanilla approach provides a strong foundation for working effectively with any web component library.

Even if you choose to use libraries in your projects, vanilla web components remain relevant in real-world development. You may encounter existing codebases built with vanilla web components and need to debug or extend them. You may also decide that a lightweight, dependency-free solution is the best fit for particular use cases. In these situations, familiarity with the core concepts including custom elements, templates, Shadow DOM, and lifecycle callbacks is critical.

Understanding how vanilla web components are implemented clarifies why libraries were created. But vanilla web components can suffer from boilerplate code, rendering concerns, and complex state management. Seeing these issues firsthand helps you to appreciate how libraries streamline development and improve maintainability.

3.1 Defining vanilla web components

3.1.1 Basic structure

3.1.2 Attributes

3.1.3 Properties

3.2 Lifecycle callback methods

3.3 Source of truth

3.4 Code editor tooling

3.5 Module support and live reload

3.6 Shadow DOM

3.6.1 Constructible style sheets

3.7 Styling web components

3.7.1 Inheritable CSS properties

3.7.2 CSS custom properties

3.7.3 part attributes

3.7.4 Shared CSS files

3.8 Form submissions

3.9 Radio group example

3.10 Vanilla web component issues

3.11 Summary