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.

HTML

Modules can supply a Template HTML File that will be injected and available to the Module at run-time. You can read the Documentation here.

Otherwise, you are free to add and remove Elements from the top-level container as you see fit, for example:

module.exports = extends window.casthub.module {

    /**
     * Initialize 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);
    }

};

Some useful references you have access to are:

  • this.$container - The overall container of the Module Element.

CSS

There are many ways of customizing your Module's CSS - they are all covered in our CSS Documentation.

How do I debug it?

You can modify Module DOM and style it. Now let's go over how to debug it.

Flow and Debugging