Skip to content

Latest commit

 

History

History
53 lines (37 loc) · 2.46 KB

README.md

File metadata and controls

53 lines (37 loc) · 2.46 KB
Raw

web-component

Build Status codecov npm version npm downloads license

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.