Home

Awesome

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);