Web components

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

As they are native to the web, they can be used in any web-based environment. They are framework independent.

Web components house the main meat of components - markup, styles, and any required (Javascript) behaviour.

There are three main technologies:

• Custom elements: lets you define custom HTML elements and their behavour
• Shadow DOM: Javascript APIs for an encapsulated DOM tree tied to the element. Keeps things private and self contained
• HTML templates: <template> and <slot> lets you write markup that aren't displayed on the rendered page.

Once you've built a Web Component, they can be used like regular HTML elements that accept attributes:

<product-card imgSrc="img.jpg"></product-card>

https://developer.mozilla.org/en-US/docs/Web/Web_Components

[[20221024125721-web-components-design-systems]]

[[browsers]] [[components]] [[componentapi]] [[css]] [[html]] [[js]] [[web]]