Overview
A Progressive Web Component is a native Custom Element designed in two layers: a base layer of HTML and CSS that renders immediately, without JavaScript, and an enhancement layer of JavaScript that adds reactivity, event handling, and more advanced templating. There are three types of Progressive Web Components:
1. Composite
Composite Components wrap and enhance the HTML composed inside them. All of their HTML and CSS lives in the Light DOM. You could also call these HTML Web Components.
2. Primitive
Primitive Components are self-contained and render their own HTML. All of their CSS lives in the Light DOM together with the base HTML required for rendering the initial state.
3. Declarative
Declarative Components are a hybrid of these and utilize Declarative Shadow DOM.
TIP
Elena doesn’t force this taxonomy. They’re all just web components, and you choose how to build yours. But since Progressive Web Components is a design philosophy rather than a library feature, understanding the distinction between these approaches helps when deciding what fits your use case.
Next steps
- Start with the Quick Start guide.
- View the Live examples for demos.
- Browse our FAQ for frequently asked questions.