web-component

Web component helper library to reduce the amount of boiler-plate code required to create custom web components.

Interface

WebComponent(componentName: string, options: {
    attributes?: string[],
    template?: HTMLTemplateElement | HTMLElement | string | function
})

componentName

The component name must have a hypen in it to be a valid web component. The class will throw an error if it does not include a hyphen.

options.attributes

A list of attributes that the component can access in the template.

options.template

A template may be passed. It can be in the form of an HTMLTemplate, HTMLElement or literal string. Tokens in the template will be processed using template literal syntax ('${...}'). Tokens will access to the class attribute values.

HTMLTemplate

<template>...\</template>

HTMLElement

<div>...</div>

Literal String

"<div>...</div>"

Usage

Example 1: JavaScript

new WebComponent('custom-button', {
    attributes: ["text"],
    template: '<div class="cstm-btn">${text}</div>'
});

HTML

<custom-button text="Subscribe" />