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 {
  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 -->

Development

Install dependencies: npm install

Run local demo:

• cd demo
• npm install
• npm start
• Visit http://localhost:8080/

Running tests

Browser tests run with Selenium through web-component-tester.

Run with locally installed browsers

npm test

Tunnel to Sauce Labs

npm run build-test && npm run test-browser-sauce

Set credentials with environment variables SAUCE_USERNAME and SAUCE_ACCESS_KEY. The default browser/OS matrix is defined in wct.conf.json.

License

MIT