A customElements abstraction layer to create web components that can be rendered on both client and server sides
A customElements abstraction layer to create web components that can be rendered on both client and server sides
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. (source: MDN)
In pure javascript, web components are generally written using custom elements and possibly shadow DOM.
Web-components are part of the user interface. They provide lifecycle methods once instantiated, but have no rendering method that can be executed on both client and server.
The WebComponent library is designed to solve these problems. Unlike most reactive component frameworks / libraries, WebComponent is just a small layer on top of customElements written in typescript (only 1.3kb) that doesn't take you out of the scope of traditional javascript development, doesn't use JSX, and doesn't require a transpiler.
To learn how to use it, check the wiki !
The WebComponent layer is available as ESModule / IIFE / Commonjs.
npm install @enzoaicardi/webcomponent
import { WebComponent } from "@enzoaicardi/webcomponent"; // es modules
const { WebComponent } = require("@enzoaicardi/webcomponent"); // commonjs modules
// es modules
import { WebComponent } from "https://cdn.jsdelivr.net/npm/@enzoaicardi/webcomponent@latest/esm/webcomponent.js";
<!-- iife function execution -->
<script src="https://cdn.jsdelivr.net/npm/@enzoaicardi/webcomponent@latest/iife/webcomponent.js"></script>
<script>
// global object destructuration
const { WebComponent } = WebComponent;
</script>