Render a native HTML template with JavaScript

Note 9/9/2022: There is a proposal for DOM Parts on the table: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/DOM-Parts.md

You could replace content with Template Literal String notation

string:

  <h1>Run ${name}! Run!</h1>
  Ain't <b>${tooling}</b> great!!

property Object:

{ 
   name: this.getAttribute("name"),
   tooling: "Web Components",
}

• The parse(str,v) function
• creates a new Function
• with a String literal (note the back-ticks)
• then executes that Function
• passing all v Object values
• and Returns the parsed String literal

<template id="MY-ELEMENT">
  <h1 style="background:${color}"> Run ${name}! Run!</h1>
  Ain't <b>${tooling}</b> great!!
</template>

<my-element name="Forrest"></my-element>

<script>
  function parse(str, v = {}) {
    try {
      return new Function("v", 
             "return((" + Object.keys(v).join(",") + ")=>`" + 
              str + 
             "`)(...Object.values(v))")(v) || "";
    } catch (e) {
      console.error(e);
    }
  };
  customElements.define("my-element", class extends HTMLElement {
    color = "gold";
    constructor() {
      super().attachShadow({mode: 'open'}).innerHTML = parse(
        document.getElementById(this.nodeName).innerHTML, // String
        { // properties
          name: this.getAttribute("name"),
          tooling: "Web Components",
          ...this, // to show you can add anything you want to the property bag
        });
    }
  })
</script>

One of the possible solution is manipulation of the HTML string itself. There is not much stuff you can do with content inside DOM tree without some special markup (like you mentioned in your question).

So, you clone the template and modify inner HTML of every child inside the template:

// Gather the template from DOM and clone it
const template = document.querySelector('#target_template');
const clonedDocumentFragment = template.content.cloneNode(true);

// Looks like there is no better way to modify HTML of the whole
// DocumentFragment, so we modify HTML of each child node:
Array
    .from(clonedDocumentFragment.children)
    .forEach(childElement => renderInnerVariables(
        childElement,
        {
            // Pass your values here
        }
    ));

// And here example of the method replacing those values
function renderInnerVariables(targetElement, variables = {}) {
    // Reminder: it can be really unsafe to put user data here
    targetElement.innerHTML = targetElement.innerHTML.replace(
        // Instead of looping through variables, we can use regexp
        // to get all the variables in content
        /__([\w_]+)__/,
        (original, variableName) => {
            // Check if variables passed and target variable exists
            return variables && variables.hasOwnProperty(variableName)
                // Pass the variable value
                ? variables[variableName]
                // Or pass the original string
                : original;
        }
    );
}

But since it's just a string content modification, you can pretty much just use string templates instead.

If I understood correctly you want to create a template based on object.. if yes you can use this as a start..

What I did was to create a function getTagName(key) which will return a specific string based on the object key (it can be made with a switch most probably but eh.. :( switch on regex ) For example __value2__ will return input

Then I created a function createHtmlElementwith with some conditions in order to set the text/value to my element then I iterate through all the properties and append the newly created element

const data = {
  __heading__: 'Lots of things',
  __label1__: 'label 1',
  __value1__: 'value 1',
  __label2__: 'label 2',
  __value2__: 'value 2',
  __instruction__: 'Do the thing',
  __label3__: 'label 3',
  __value3__: 'value 3',
}
let container = document.getElementById('container');

// this can be done with switch i think, but for demo i did if statements :(
function getTagName(key) {
  key = key.replace('__', ''); //remove __ from front

  if (/^heading/.test(key)) return "h2";
  if (/^label/.test(key)) return "label";
  if (/^value/.test(key)) return "input";
  if (/^instruction/.test(key)) return "div";
}

function createHtmlElement(name, key, value) {
  let element = document.createElement(name);
  if (name === 'label' || name === "h2" || name === "div") {
    element.innerHTML = value;
  }
  if (name === "input") {
    element.type = "text";
    //element.value = key; // this is not working for i don't know what reason :(
    element.setAttribute('value', key);
  }

  // console.log(element) // decomment if you want to see the element as plain html
  return element;
}

for (const [key, value] of Object.entries(data)) {
  let tagName = getTagName(key);
  let element = createHtmlElement(tagName, key, value);

  let brTag = document.createElement("br");

  container.appendChild(element);
  container.appendChild(brTag);

}

<div id="container">
</div>

<!--
    <h2>__heading__</h2>
    <label>__label1__</label>
    <input type="text" value="__value1__">
    <label>__label2__</label>
    <input type="text" value="__value2__">
    <div>__instruction__</div>
    <label>__label3__</label>
    <input type="text" value="__value3__">   
 -->