regularElements

V1 Breaking Changes

• the definition now follows standard naming convention
• callbacks are callbacks, not even driven anymore
• if present, observedAttributes must contain at least one attribute name
• browsers older than IE 11 might not work as expected
• the minified gzipped size is now ~0.9K

Everything I love about Custom Elements made available for any node, and through CSS selectors.

No Custom Elements, no Shadow DOM, and no polyfills are needed.

// if loaded as <script>, it's exposed as global regularElements
import {define} from 'regular-elements';

define('button.alive', {
  // lifecycle callbacks
  connectedCallback() {
    this.disabled = false;
    this.classList.add('fade-in');
  },
  disconnectedCallback() {
    console.log('goodbye');
  },

  // attributes notifications
  observedAttributes: ['only', 'these', 'attrs'],
  attributeChangedCallback(attributeName, oldValue, newValue) {
    console.log(attributeName, oldValue, newValue);
  }
});


define('#any > sel-ector[you=like]', {
  // ...
});

The module exports the same API found in CustomElementRegistry: define(selector, definition), get(selector), upgrade(node), and whenDefined(selector).

Best Practices

Since, like it is for Custom Elements, you can define one selector per time, it is suggested to not use too generic selectors such a or button in case you'd like to compose behaviors.

A single node can indeed behave in various way, as long as it matches one or more defined selector.

regularElements.define('.clicker', {
  connectedCallback() {
    this.addEventListener('click', theClicker);
  }
});
regularElements.define('.hi-five', {
  connectedCallback() {
    this.textContent += ' 🖐 ';
  }
});

Whenever an element with either the class clicker, or hi-five, or both is created or found live on the DOM, it will be setup once per behavior, as demoed here.