Webcomponent NPM

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

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

  get myprop() {
    // ...
  }
  // etc
}
customElements.define('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")
works out-of-the-box with Babel 6's class inheritance, without the need for extra plugins (see Babel issue "Native extends breaks HTMLELement, Array, and others")
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]">

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

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

`getNumberAttribute(attrName)`

Parse a numeric attribute, e.g.,

<my-widget-list num-widgets="15">

this.getNumberAttribute('num-widgets') // 15

Non-numeric values will return null.

`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="awesome">  <!-- enabled -->
<my-widget awesome="false">    <!-- disabled -->
<my-widget>                    <!-- disabled -->