Lightweight library providing interface for building web components
npm install web-component
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.
``bash`
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
`javascript
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
The code is available under the MIT license.