# web-components

- Page: https://shared.btbytes.com/p/web-components
- Date: 2024-09-03

[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) -- "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."

> The [`<template>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) and [`<slot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.

--

[kgscialdone/facet](https://github.com/kgscialdone/facet?tab=readme-ov-file) : Web components made simple and declarative using one line include of js.

```html
<script src="https://cdn.jsdelivr.net/gh/kgscialdone/facet@0.1.2a/facet.min.js"></script>

<template component="hello-world">
  <p>Hello, <slot>world</slot>!</p>
</template>

<hello-world></hello-world>
<hello-world>Facet</hello-world> <!-- replaces "world" with "Facet" -->

```