webcomponent

webcomponent

Lightweight utilities for constructing Web Components

Installation

Install via npm, for packaging with a bundler such as Webpack or Browserify:

npm install --save webcomponent

If your target environment does not have native support for Web Components, you should include a separate polyfill such as webcomponents.js.

Usage

Register web components by extending the WebComponent class instead of HTMLElement:

import WebComponent from 'webcomponent';
class MyWidget extends WebComponent {
  attachedCallback() {
    // ...
  }

  get myattr() {
    // ...
  }
  // etc
}
document.registerElement('my-widget', MyWidget);

WebComponent is a thin wrapper around HTMLElement which

• works out-of-the-box in Safari (see Babel issue "Can't extend HTMLElement in Safari")
• provides some extra helper methods next to the standard Element API

Built-in helper methods:

getJSONAttribute(attrName [, errorHandler]): parse an attribute which has been serialized as JSON, e.g.,

<my-widget data-magic-numbers="[1,2,3]"></my-widget>

this.getJSONAttribute('data-magic-numbers') // [1, 2, 3]

If no errorHandler is passed, JSON-parsing errors will result in null being returned.

isAttributeEnabled(attrName): check whether a boolean-like attribute is 'enabled', taking into account usages such as:

<my-widget awesome=true>    <!-- enabled -->
<my-widget awesome>         <!-- enabled -->
<my-widget awesome=false>   <!-- disabled -->
<my-widget>                 <!-- disabled -->

License

MIT