example_h1.sub.html

gulp_place("app._BUILD_.example_el= toELID(app._BUILD_.example_el_id++)", "eval");
gulp_place("app._BUILD_.example_onkeyup= toKeyUp(app._BUILD_.example_el)", "eval");
<p>The real benefit of <a href="https://github.com/jaandrle/dollar_dom_component/blob/master/docs/%24dom_component.md#module_jaaJSU..$dom.component">$dom.component</a>
    is to creating reusable components. It can be created by function scope, for expose internal
    API use <a href="https://github.com/jaandrle/dollar_dom_component/blob/master/docs/%24dom_component.md#module_jaaJSU..$dom..instance_component.share"><code>.share</code></a> namespace.
</p>
<div class="output" id="gulp_place('app._BUILD_.example_el', 'variable')"></div>
<script onkeyup="gulp_place('app._BUILD_.example_onkeyup', 'variable')" contenteditable="">
(function(element_id){
    //EXAMPLE START

    const el= document.getElementById(element_id);
    paragraph("red").mount(el);
    paragraph("blue").mount(el);

    function paragraph(color){
        return $dom.component("P", { textContent: "Simple paragraph", className: `example_${color}_color` })
        .share;
    }
    
    //EXAMPLE END
})("gulp_place('app._BUILD_.example_el', 'variable')");
</script>
<!-- example source links -->