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 template
  styles: require('./hello-world.css'), //provide styles
  extends: 'button', //default does not extends any
  shadowDOM: true, //default false
  mode: "open" // default open, set to closed to block access to shadowDOM
})
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

License

The code is available under the MIT license.