Templating in HTML

And if you want it to be a valid HTML custom-element, just throw a dash in the name (like ). https://html.spec.whatwg.org/#valid-custom-element-name

Because JS is where the privacy holes are at and keep getting added.

> where JS considerations have come to dominate

Not JS. Chrome, and their decade-old crusade to make web components happen, no matter the cost or common sense

Here's what I got:

    const $template = function(template) {
        // make copy of template content
        const root = template.content.cloneNode(true);
        
        // create proxy object for accessing named nodes and root
        const obj = {
                get $root() {
                        // after template root is called, remove this getter function
                        delete obj.$root;
                        
                        // return root only once
                        return(root);
                }
        };
        
        // find all named template nodes and add to proxy object
        for (const node of root.querySelectorAll('[data-tmpl-name]'))
                obj[node.dataset.tmplName] = node;
                
        // otherwise create template node content wrapped in proxy which
        // makes attempts to overwrite properties an error.
        return(new Proxy(obj, {
                set: () => { throw (new Error(`Attempt to overwrite a template node!`)); }
        }));
    }
    

You can use it with something like:

And then just:

    function of_some_sort() {
        const t = $template(document.getElementById('some_id'));
        
        t.header.innerHTML = 'The Header';
        t.title.innerHTML = 'The title';
        
        t.info.innerHTML = 'More stuff.';
        
        document.body.append(t.$root);
    }
    

This is was the first version I made. It's not hard to get from here to a version that can fill the template with a data object for you. In my most recent version, you could do:

    function of_another_sort() {
        document.body.append($template(document.getElementById('some_id'), {
            header: 'The Header',
            title:  ['first title', 'second title'],
            
            info: (elem) => {
                elem.setAttribute('functions', 'work');
                elem.innerHTML = 'and receive the internal element itself.';
            }
        }));
    }
    

Arrays duplicate the internal element and make copies of it, objects recurse into the element building a 'key.path.name' while looking for data-tmpl-name to replace. Functions get a copy of the element for more than just innerText/innerHTML replacement. A null or false value eliminates the internal element, and a true value passes it through unchanged.

If you've ever used the old ruby library Amrita, it's basically that, but for HTML Template elements. You can easily do all this in about 100 lines of JS.

There's no lack of syntactical templating mechanisms when HTML is hosted within a SGML markup processing context (ie how HTML started life), and no need to add templating at the HTML markup vocabulary level either:

For server-side rendering, SGML (and also some other template "engines") provide HTML-aware, type-checked, parametric macro expansion. Actually, SGML templating works transparently on the client side and the server side.

Within the browser OTOH, there's already JavaScript, making every dynamic feature added to HTML inessential for better or worse, like it has for over 25 years now. That's just how it was decided a long time ago, and adding half-assed features to HTML like the template element (which requires JavaScript, in turn, thus doesn't add any essential capability) all the time is exactly the thing we shouldn't be doing when the damn "web stack" is already bloated as fuck.