Structure #

Modules are single Web Component that must always extend the window.casthub.module Component, or a subset of it.

With this comes some useful methods to help in working with the Shadow DOM and other aspects of Module Development.

CSS #

Since Modules are confined to their own Shadow DOM, you are free to define CSS at your leisure without the worry of clashing names or affecting the App itself or other Modules.

As this requires working with the Shadow DOM instance directly, there is a useful setter included in Modules for setting your CSS so that we can handle it for you:

return class extends window.casthub.module {

    /**
     * Initialise the new Module.
     */
    constructor() {
        super();

        // Set the CSS for the Module.
        this.css = `
            .module {
                background: #FF0000;
            }
        `;
    }

};

If you'd prefer to deal with this yourself, you can modify the this.$style element directly.

Adding new Elements #

By default, Modules are given a single top-level container to add Elements to: this.$container with a class of module. This is by no means a restriction and is just a good starting point, allowing the use of the following methods to add new Elements to your Module:

return class extends window.casthub.module {

    /**
     * Initialise the new Module.
     */
    constructor() {
        super();

        // Create a new Element.
        this.$newElement = document.createElement('div');
        this.$newElement.classList.add('hello-world');

        // And add it to the Module Container.
        this.addEl(this.$newElement);

        // You can also style the container.
        this.css = `
            .module {
                background: #FF0000;
            }
        `;
    }

};