Skip to content

Web Components#

Definition from open-wc Web Components basics

Web Components are a set of low-level browser features that allow us to write modular, encapsulated and reusable HTML elements. Web Components are based on web standards and work in any environment that supports basic HTML and JavaScript. This means that there is no complex setup required for you to get started. Web Components align with the way that browsers have always worked, they are pretty low level and straightforward. For most projects you will still want to use libraries or frameworks. But instead of each framework developing their own component model, they can use the features that are already baked into the browser. Web components are quite flexible and have a multitude of possible use cases. The more prominent use case is to build reusable UI components. This is especially powerful, for the reason that UI components can be reused in applications that are built with different technologies. Furthermore, Web Components can also be used to compose entire applications and are also a perfect fit for static/server-rendered pages where the components just add interactivity after the initial render.

Principles#

Polymer (google component library)

designed with a set of principles in mind: encapsulation, composition and separation of concerns

Tools and frameworks.#

Tutorials and guides#

How to create a native web component without a framework#

Nice overview with HTML templates. Covering shadow dom, slots etc.

Question here is how this fits with lit-html

Build your First App with Web components#

From 2018, describes building an app out of components - uses Polymer a library from Google, which includes some components that might be useful.