be
builtin-elements
npm i builtin-elements
be

builtin-elements

A zero friction custom elements like primitive.

by Andrea Giammarchi

1.0.1 (see all)License:ISCTypeScript:Not Found
npm i builtin-elements
Readme

builtin-elements

Coverage Status

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


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.

Downloads/wk

61

GitHub Stars

61

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.0.1
latest
4mos ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate