wickedElements

Bringing the regularElements goodness to a component based world.

no polyfills needed, it works down to IE9
lightweight as in ~2K lightweight
CPU & RAM friendly ^{_{(100% based on handleEvent through prototypal inheritance)}}
components can exist at any time ^{_{(past, present, future)}}
no issues with classes, it works well with composed behaviors
you can use classes if you like anyway, just pass one instead of a literal!
you can define multiple behaviors, per same DOM element, through the power of CSS selectors
lazy load any component at any time: all their states are uniquely private per selector and per node
either attributeFilter or observedAttributes can be used to observe specific attributes

Same regularElements API, meaning same customElements API.

// either via classes (ES2015+)
// wickedElements.define('[is="wicked-element"]', class { ... });
// or literals (ES5+)
wickedElements.define('[is="wicked-element"]', {

  // always triggered once a node is live (even with classes)
  // always right before onconnected and only once,
  // ideal to setup anything as one off operation
  init: function (event) {
    // the context is actually a private object
    // that inherits the component definition
    // literally: Object.create(component)
    this.el = event.currentTarget;
    // accordingly, you can attach any property
    // and even if public, these won't ever leak
    // (unless you decide to leak the component)
    this._rando = Math.random();
    // you can invoke directly any method
    this.render();
  },

  // regularElements hooks available
  onconnected(event) { ... },
  ondisconnected(event) { ... },
  onattributechanged(event) { ... }

  // and any other event too
  // just prefix a method with `on` and it will
  // be automatically setup for listening
  onclick(event) { ... },

  // works well with any 3rd parts library
  // WARNING: THIS IS JUST AS EXAMPLE,
  //          YOU DON'T NEED hyperHTML
  //          TO USE THIS LIBRARY!
  //          THE NODE CAN BE ANY NODE
  //          AND ALREADY POPULATED WITH CONTENT
  render() {
    this.html`<p>I am rando ${this._rando}</p>`;
  },

  // any object literal syntax available out of the box
  // it's 100% based on prototypal inheritance
  get html() {
    return hyperHTML.bind(this.el);
  }
});

Examples to list specific attributes:

// literals
wickedElements.define('...', {
  // ...
  observedAttributes: ['only', 'these'],
  // **OR**
  attributeFilter: ['only', 'these']
  // ...
});

// classes
wickedElements.define('...', class {
  // ...
  static get observedAttributes() {
    return ['only', 'these'];
  }
  // **OR**
  get attributeFilter() {
    return [];
  }
  // ...
});

grommett/wicked-elements

wickedElements