@purewc/template v0.2.3

HTMLElementTemplate

An ultra-light (1.3kb) base class for writing vanilla Web Components

Overview

Usage

Install

npm i @purewc/template

Import and extend from template

import HTMLElementTemplate from '@purewc/template';

class HTMLSomeCustomElement extends HTMLElementTemplate {
    static CSS = `
:host {
  min-height: 100px;
}

#container {
  background-color: #eee;
}
`;
    static template = `
<div id="container">
</div>
`;

    static observedAttributes = [
        ...
    ];

    static properties = {
        "title": {
            "default": "Hello world",
            updated () {
                // Code to run whenever value has changed
                this.$container.innerHTML = this.title;
            },
        },
    };

    static refs = {
        "$container": `#container`,
    };

    constructor () {
        super();
    }
}

Contributing

See CONTRIBUTING.md