Naughty Pinching Mannequins


    1.0.1 • Public • Published


    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) {
        this.textContent = text;
    document.body.appendChild(new MyButton('Hello!'));



    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.


    npm i builtin-elements

    DownloadsWeekly Downloads






    Unpacked Size

    23.9 kB

    Total Files


    Last publish


    • webreflection