Pandora

Pandora is a Web Components library that allows you to create simple and reusable custom HTML elements.

Components

// Create a new Component
class CustomElement extends Pandora.Component {

    constructor () {
        super ();

        // Add a text property
        this.props = {
            text: ''
        };
    }

    render () {
        // When rendered, this component will show an h2 element with the text
        // given on the props.
        return `<h2>${this.props.text}</h2>`;
    }
}

console.log (CustomElement.tag); // custom-element

// Register the custom element with its tag on the window and add the CustomElement
// class as its controller
window.customElements.define (CustomElement.tag, CustomElement);

// Get the custom element from the DOM
const element = document.querySelector ('custom-element');

// Set its text to Hello World!
element.setProps ( {
    text: 'Hello World!'
});

Documentation

You can find alll the documentation for this library at https://developers.aegisframework.com/pandora/

License

This library is released under a MIT License