Make and style custom web components easily!

INSTALLATION

The best way to install Custom-Components is by installing the npm package.

NPM
                   
                       $ npm install --save @ajnauleau/custom-components
                   
               

Guide

Style

First start out by adding css styles to your component:

            import { Component } from '@ajnauleau/custom-components';


const Custom = Component.styled`
    color: red;
    background: black;
`;
        

Extend

Extend your component by adding any valid HTML between template literals '':

            class WebComponent extends Custom {

    constructor() {
        super();
    }

    render() {
        let world = 'world';
        return (
            `<div>
                <p>hello ${world}</p>
             <div>
             `
        )
    }
}
        

Render

Render your new web component and give it a custom name. REMEMBER! Web component names must use a hyphen (-).

            customElements.define('custom-component', WebComponent);
        

Result

Embed and link your javascript, then use your new custom component.

            <html>
    <body>
        <custom-component>
        </custom-component>
        <script type="module" src="./index.js"></script>
    </body>
</html>
        

Summary

Here's the complete javascript file for your reference.

            import Component from '@ajnauleau/custom-components';


const Custom = Component.styled`
    color: red;
    background: black;
`;


class WebComponent extends Custom {

    constructor() {
        super();
    }

    render() {
        return (
            `<p>hello</p>`
        )
    }

}

customElements.define('custom-component', WebComponent);