Concepts›Web components

Web components

Glass ships as a web component. If the term is new, this page is all you need to know.

What it is

Web components are a browser standard for making your own HTML tags. <video> is a tag with a lot of behaviour hidden inside. A web component is the same idea, written by someone else. It isn't a framework, so there is nothing to learn beyond HTML.

Custom elements

A custom element is a tag with a dash in its name, like <edinstvo-glass>. When you import the package, it tells the browser what that tag does. From then on it behaves like any element: you can style it, nest it, add it from JavaScript or remove it.

Attributes

Settings are attributes, the same way src works on an image. Change one and the glass updates, smoothly where it makes sense.

document.querySelector("edinstvo-glass").setAttribute("frost", "0.8");

Shadow DOM

The element keeps its inner parts in a shadow DOM, a private part of the page. Its styles can't break yours, and yours can't break it. Your content stays outside, in the normal page, so it remains real text.

What this means for your project

It works in every framework, because every framework renders HTML. It doesn't age with your stack: when you move from one framework to another, the tag stays. And a design system can use it once for every product. See Frameworks.