builtin-elements

Social Media Photo by zebbache djoubair on Unsplash

A zero friction custom elements like primitive.

• zero polyfills needed
• nothing to define(...)
• same Custom Elements mechanism plus ...
• ... the ability to upgrade or downgrade any element, at any time (hydration)
• all in ~1K once minified+gzipped (~2K without compression)
• it works even on IE11 (requires transpilation if written as ES6+)

import {HTML, SVG} from 'builtin-elements';

class MyButton extends HTML.Button {
  constructor(text) {
    super();
    this.textContent = text;
  }
}

document.body.appendChild(new MyButton('Hello!'));

Examples

• Live Demo
• µhtml example
• React example

API

This module exports the following utilities:

• An HTML namespace to extend, example:
  • class Div extends HTML.Div {}
  • class P extends HTML.Paragraph {}
  • class P extends HTML.P {}
  • class TD extends HTML.TD {}
  • class UL extends HTML.UL {}
  • class UL extends HTML.UList {}
  • ... and all available HTML natives ...
  • class Main extends HTML.Main {} works too, together with Header, Footer, Section, Article, and others
• An SVG namespace to extend too
• An upgrade(element, Class) helper to manually upgrade any element at any time:
  • no replacement, hence nothing is lost or changed
• A downgrade(element) utility to drop all notifications about anything when/if needed
• An observer, from element-notifier, able to .add(specialNodes) to observe. Also the main library observer that can be disconnected whenever is needed.

// full class features
class BuiltinElement extends HTML.Element {

  // exact same Custom Elements primitives
  static get observedAttributes() { return ['test']; }
  attributeChangedCallback(name, oldValue, newValue) {}
  connectedCallback() {}
  disconnectedCallback() {}

  // the best place to setup any component
  upgradedCallback() {}

  // the best place to teardown any component
  downgradedCallback() {}
}

When hydration is desired, upgradedCallback is the method to setup once all listeners, and if elements are subject to change extend, or be downgraded as regular element, downgradedCallback is the best place to cleanup listeners and/or anything else.