Webcomponent.js

A customElements abstraction layer to create web components that can be rendered on both client and server sides

What is a web-component

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.

Why WebComponent ?

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 !

List of all exports

• [x] WebComponent
• [x] isClient
• [x] isServer

Installations

The WebComponent layer is available as ESModule / IIFE / Commonjs.

NPM Package

npm install @enzoaicardi/webcomponent

import { WebComponent } from "@enzoaicardi/webcomponent"; // es modules
const { WebComponent } = require("@enzoaicardi/webcomponent"); // commonjs modules

CDN import

// 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>