example_t1.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>You can define listener outside function scope (see <a href="https://github.com/jaandrle/dollar_dom_component/blob/master/docs/%24dom_component.md#module_jaaJSU..$dom.componentListener"><code>$dom.componentListener</code></a>):</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 container= document.getElementById(element_id);
    const update_ChangeSum= $dom.componentListener("update", { sum: 0 }, ({ sum })=> ({ textContent: sum }));
    const update_ChangeColor= $dom.componentListener("update", { color: "blue" }, ({ color })=> ({ className: `example_${color}_color` }));

    counterComponent({ textContent: "Number of yours socks: " }).mount(container);

    function counterComponent({ textContent }){
        const click_addOne= $dom.componentListener("click", function(){ this.update(({ sum })=> ({ sum: sum+1 })) });
        
        const { add, share, update }= $dom.component("DIV", null);
            add("BUTTON", { textContent: "+" }).on(click_addOne);
            add("BUTTON", { textContent: "red", onclick: setColor }, -1);
            add("BUTTON", { textContent: "blue", onclick: setColor }, -1);
            add("P", { textContent }, -1);
                add("STRONG", null).on(update_ChangeSum, update_ChangeColor);
        return share;

        function setColor(){ update({ color: this.textContent }); }
    }
    
    //EXAMPLE END
})("gulp_place('app._BUILD_.example_el', 'variable')");
</script>
<!-- example source links -->