Home

web-component is a lightweight library providing interface for building web components.

Package provides a decorator function that allows you to:

• easy define Custom Elements
• styling a custom element
• creating elements from a template
• attribute binding
• 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 false})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.

Important

@WebComponent decorator return a constructor returned by document.registerElement, which you then can use to call:

@WebComponent('hello-world')classFooElementextendsHTMLElement{
...
}constFooInstance=newFooElement();document.querySelector('body').appendChild(FooInstance);

Using the constructor of FooElement directly without WebComponent decorator, will throw an InvalidConstructor - exception.

classFooElementextendsHTMLElement{
...
}constFooElementCtor=document.registerElement('element-name',FooElement);constFooInstance=newFooElement();//will throw InvalidConstructorconstFooInstance=newFooElementCtor();//will workdocument.querySelector('body').appendChild(FooInstance);

Calling the constructor directly may be supported in future, or it is just an error in the spec.