web-component

Lightweight library providing interface for building web components.

Contribution

Is web-component library missing something ?

No problem! Simply fork this repository, add middleware and create pull request.

Installation

npm install --save web-component

Documentation

Package provides a decorator function that allows you to:

• easy define Custom Elements
• styling a custom element
• creating elements from a template
• encapsulate style and markup using Shadow DOM
• extending other custom elements or even the browser's built-in HTML

import{WebComponent}from'web-component'
@WebComponent('hello-world',{template: require('./hello-world.html'),// provide templatestyles: require('./hello-world.css'),//provide stylesextends: 'button',//default does not extends anyshadowDOM: true,//default falsemode: "open"// default open, set to closed to block access to shadowDOM})exportclassHelloWorldextendsHTMLElement{}

If shadowDOM option is set to true then template and styles will be attached to shadowRoot. If there is no shadowRoot, it will be created with modeopen.

1. Hello World Example
2. web-components-webpack-es6-boilerplate

License

The code is available under the MIT license.