Web-component-base NPM

>>> TLDR; See the Quick Start Example you can just copy, refactor, and modify

Web Component Base

This provides a very minimal base class for creating reactive custom elements easily.

When you extend the WebComponent class for your component, you only have to define the template and properties. Any change in any property value will automatically cause just the component UI to render.

The result is a reactive UI on property changes.

Import via unpkg
Installation via npm
Usage
Quick Start Example
Life-Cycle Hooks
1. onInit - the component is connected to the DOM, before view is initialized
2. afterViewInit - after the view is first initialized
3. onChanges - every time an attribute value changes

Import via unpkg

Import using unpkg in your component. We will use this in the rest of our usage examples.

import WebComponent from "https://unpkg.com/web-component-base";

// or a specific version
import WebComponent from "https://unpkg.com/web-component-base@1.6.0/index.mjs";

Installation via npm

If you have a bundler to help resolving imports:

npm i web-component-base

Usage

In your component class:

// HelloWorld.mjs
import WebComponent from "https://unpkg.com/web-component-base";

class HelloWorld extends WebComponent {
  name = "World";
  emotion = "excited";

  static properties = ["name", "emotion"];

  get template() {
    return `
        <h1>Hello ${this.name}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
  }
}

customElements.define('hello-world', HelloWorld);

In your HTML page:

<head>
  <script type="module" src="HelloWorld.mjs"></script>
</head>
<body>
  <hello-world name="Ayo" emotion="sad">
  <script>
      const helloWorld = document.querySelector('hello-world');

      setTimeout(() => {
        helloWorld.setAttribute('emotion', 'excited');
      }, 2500)
  </script>
</body>

The result is a reactive UI that updates on attribute changes:

Quick Start Example

Here is an example of using a custom element in a single .html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WC Base Test</title>
    <script type="module">

      // import from unpkg
      import WebComponent from "https://unpkg.com/web-component-base";

      class HelloWorld extends WebComponent {
        static properties = ["name"];

        get template() {
          return `<h1>Hello ${this.name || 'World'}!</h1>`;
        }
      }

      customElements.define("hello-world", HelloWorld);

    </script>
  </head>
  <body>
    <hello-world name="Ayo"></hello-world>
    <script>
        const helloWorld = document.querySelector('hello-world');
        setTimeout(() => {
            helloWorld.setAttribute('name', 'Ayo zzzZzzz');
        }, 2500);
    </script>
  </body>
</html>

Life-Cycle Hooks

Define behavior when certain events in the component's life cycle is triggered by providing hook methods

onInit()

triggered when the component is connected to the DOM
best for setting up the component

import WebComponent from "https://unpkg.com/web-component-base";

class ClickableText extends WebComponent {
  // gets called when the component is used in an HTML document
  onInit() {
    this.onclick = () => console.log(">>> click!");
  }

  get template() {
    return `<span style="cursor:pointer">Click me!</span>`;
  }
}

afterViewInit()

triggered after the view is first initialized

class ClickableText extends WebComponent {
  // gets called when the component's innerHTML is first filled
  afterViewInit() {
    const footer = this.querySelector('footer');
    // do stuff to footer after view is initialized
  }

  get template() {
    return `<footer>Awesome site &copy; 2023</footer>`;
  }
}

onChanges()

triggered when an attribute value changed

import WebComponent from "https://unpkg.com/web-component-base";

class ClickableText extends WebComponent {
  // gets called when an attribute value changes
  onChanges(changes) {
      const {property, previousValue, currentValue} = changes;
      console.log('>>> ', {property, previousValue, currentValue})
  }

  get template() {
    return `<span style="cursor:pointer">Click me!</span>`;
  }
}

web components web component custom elements custom element

@everything-registry/sub-chunk-3122 @mcflyjs/config

2.1.0-beta.3

4 months ago

2.1.0-beta.2

4 months ago

0.0.0-experimental.11

5 months ago

0.0.0-experimental.10

5 months ago

0.0.0-experimental.13

5 months ago