lightweight helpers for constructing web components
npm install webcomponent
Lightweight utilities for constructing Web Components
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.
Register web components by extending the WebComponent class instead of HTMLElement:
``javascript
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
Parse an attribute which has been serialized as JSON, e.g.,
html
`
javascript
this.getJSONAttribute('data-magic-numbers') // [1, 2, 3]
`
If no is passed, JSON-parsing errors will result in null being returned.####
getNumberAttribute(attrName)
Parse a numeric attribute, e.g.,
html
`
javascript
this.getNumberAttribute('num-widgets') // 15
`
Non-numeric values will return .####
isAttributeEnabled(attrName)
Check whether a boolean-like attribute is 'enabled', taking into account usages such as:
html
`Development
Install dependencies:
Run local demo:
-
-
-
- Visit http://localhost:8080/Running tests
Browser tests run with Selenium through web-component-tester.
#### Run with locally installed browsers
#### Tunnel to Sauce Labs
Set credentials with environment variables
and SAUCE_ACCESS_KEY. The default browser/OS matrix is defined in wct.conf.json`.MIT