❤
npm
Sign UpSign In

abstract-element

4.8.0 • Public • Published

abstract-element

AbstractElement aims for creating Web components identically independent from a render engines. This project has an abstract class and a set of basic methods for developing Web components using various render engines.

        +---------------------------------------+
        |                                       |
        |   AbstractElement + render-function   |
        |                                       |
        +---------------------------------------+
        |                   |                   |
        |  Web components   |          Renders  |
        +---------------------------------------+
        |                   |                   |
        |  Custom Elements  |         lit-html  |
        |                   |                   |
        |  Shadow DOM       |        hyperHTML  |
        |                   |                   |
        |  ES Modules       |           ...     |
        |                   |                   |
        |  HTML Template    |                   |
        |                   |                   |
        +---------------------------------------+

Getting started

  1. Add abstract-element to your project:

    npm i abstract-element

  2. Install a render engine*.

  3. Create an element by extending AbstractElement and calling customElements.define with your class or use @Define directive if you use TypeScript.

import { Define, AbstractElement, attr, state } from 'abstract-element';
import litRender from 'abstract-element/render/lit';
 
import { html } from 'lit-html';
 
/**
 * The demo web component with lit-html render engine
 */
@Define('demo-lit-component')
export class DemoLitComponent extends AbstractElement {
  @attr('data-demo')
  dataDemo;
 
  @state()
  time = new Date().toLocaleTimeString();
 
  constructor() {
    super(litRender, true);
 
    // update the time each second
    setInterval(() => {
      this.time = new Date().toLocaleTimeString();
    }, 1000);
  }
 
  render() {
    return html`
      <section>
        <p>${this.attr[DemoLitComponent.attributes.dataDemo]}</p>
        <div>${this.time}</div>
      </section>
    `;
  }
}
  1. Use the Web component.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Demo</title>
  </head>
  <body>
    <script src="index.js"></script> 
    <demo-lit-component data-demo="Current time is rendering with lit-html:"></demo-lit-component>
  </body>
</html>
  1. See the demo files for more examples.

Documentation

Readme

Keywords

Package Sidebar

Install

npm i abstract-element

Repository

github.com/inscriptum/abstract-element

Homepage

github.com/inscriptum/abstract-element#readme

Weekly Downloads

0

Version

4.8.0

License

MIT

Unpacked Size

45.3 kB

Total Files

27

Last publish

Collaborators

  • aleksey_zikrackiy
  • bashkos
  • sumbad
Try on RunKit
Report malware