HTML #

CastHub Modules can specify a Template HTML file in their package.json which will be injected in to the Module and available at runtime. This is identical to a <template> for re-usable HTML, and as such, the use of <slot> is allowed.

You can specify a relative URL to your Template file in your Module's package.json:

{
    "files": {
        "template": "src/template.html"
    }
}

This HTML file can include any HTML you'd like for your Element. It won't be rendered on-page (Since it is wrapped in a <template>), but will be available to your Module instantly via the this.template() function. For example:

module.exports = extends window.casthub.module {

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

        // Clone a new HTML Node from the Template.
        const $tmpl = this.template();

        // $tmpl is now a fresh clone of your Template file.
    }

};

Since the Template File can be directly appended to the Module Container, you can also specify your CSS in there:

<style type="text/css">
    .hello-world {
        color: #FF0000;
    }
</style>
<p class="hello-world">Hello World!</p>