@ajnauleau/custom-components

'Simple Custom Web Components for your Project'

Usage no npm install needed!

<script type="module">
  import ajnauleauCustomComponents from 'https://cdn.skypack.dev/@ajnauleau/custom-components';
</script>

README

Custom Web Components

Make and style custom web components easily!

Installation

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

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);

Coming Soon!

Access Props

Attribute to Props, similar to React

Lifecycle

constructor()

render()

componentDidMount()

componentDidUpdate()

componentWillUnmount()