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.


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() {

        // Create a new Element.
        this.$newElement = document.createElement('div');

        // And add it to the Module Container.


Some useful references you have access to are:

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


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