Build Status codecov npm version npm downloads license Beerpay Beerpay

Lightweight library providing interface for building web components.


Is web-component library missing something ?

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


npm install --save web-component


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 template
  styles: require('./hello-world.css'), //provide styles
  extends: 'button', //default does not extends any
  shadowDOM: true //default false
export class HelloWorld extends HTMLElement {}

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 mode open.

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


The code is available under the MIT license.