example_h5.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>All togeder:</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);
    list("red").mount(el);
    list("blue").mount(el);

    function list(color){
        const c= $dom.component("UL", null);
            c.add("LI", { textContent: "First list item with another list:", className: `example_${color}_color` });
                c.add("UL", null);
                    c.add("LI", { textContent: "Item 1.1" });
                    c.add("LI", { textContent: "Item 1.2" }, -1);
            //we need shift three levels up=> -3
            c.add("LI", { textContent: "Item 2: " }, -3);
                c.add("STRONG", { textContent: "bold part", style: "font-weight: bold;" });
                c.addText(".", -1);
            //we need shift two levels up=> -2
            c.add("LI", { textContent: "Item 3" }, -2);
        return c.share;
    }

    //EXAMPLE END
})("gulp_place('app._BUILD_.example_el', 'variable')");
</script>
<!-- example source links -->