create-modulo/build/modulo-docs/static/components/demos/modulo_component_light.html

Starter projects for Modulo.html - Ready for all uses - Markdown-SSG / SSR / API-backed SPA

<script src=../../Modulo.html></script><template type=f>

{{ doctype|safe }}

<template id="component_code">{{ value|safe }}</template>

<script>
    var modulo = window.parent.modulo
    const prefix = '<Component mode="shadow" namespace="testdemo" name="{{ name }}{{ demo-run-count }}">';
    const value = document.getElementById('component_code').innerHTML
    modulo.util.loadString(prefix + value + '</Component>', '_component')
    modulo.preprocessAndDefine(() => {
        class DemoComponent extends window.HTMLElement { // Register the component
            constructor() { super(); this.init(); }
            static observedAttributes = [ ];
        }
        const def = modulo.definitions['_component_{{ name }}{{ demo-run-count }}'];
        modulo.util.initComponentClass(modulo, def, DemoComponent);
        // Prevent mounting not happening due to wrong document:
        DemoComponent.prototype.moduloMount = function moduloMount() {
            if (!this.isMounted) {
                this.cparts.component._lifecycle([ 'initialized', 'mount' ]);
            }
        };
        window.customElements.define('x-' + '{{ name|lower }}', DemoComponent);
    });
</script>

{{ usage|safe }}