as-custom-element

As Custom Element

The easiest way to add Custom Elements like callbacks to any node.

Compatible with modern browsers, as well as IE11, and no polyfills are needed, for a minified size less than 0.8K.

import {upgrade, downgrade} from 'as-custom-element';

const someBehavior = {
  // lifecycle callbacks
  connectedCallback() {
    console.log(this, 'is connected');
  },
  disconnectedCallback() {},

  // attributes related helpers
  observedAttributes: ['one', 'or', 'more'],
  attributeChangedCallback(attributeName, oldValue, newValue) {}
};

upgrade(document.querySelector('#any'), someBehavior);

// to drop the behavior at any time
downgrade(document.querySelector('#any'), someBehavior);