How to change tag dynamically in hyperHTML

Question

This code does not work.

const render = ({title, tag, values}) => {
    bind(document.body)`
        <h1>${title}</h1>
        <div>
            <${tag} data=${values}></${tag}>
        </div>
    `
}

render({title: "test", tag: "custom-elem1", values: {foo: "bar"}})

Can I change tag dynamically using hyperHTML?

Answer 1

You might not like the answer but it's nope, you can't.

The reason is that hyperHTML, like any other similar library, doesn't work with strings, it works with DOM, and in the DOM world you cannot change a tag name, even if you try.

var div = document.createElement('div');
div.tagName = 'P';
console.log(div.tagName); // "DIV"

What you could do instead, is to return the element you like.

const render = ({title, tag, values}) => {
  const ref = document.body;
  bind(ref)`
    <h1>${title}</h1>
    <div>${(() => {
      switch tag:
        case 'custom-elem1':
          return wire(ref)`<custom-elem1 data=${values} />`;
        case 'custom-elem2':
          return wire(ref)`<custom-elem2 data=${values} />`;
        case 'custom-elem3':
          return wire(ref)`<custom-elem3 data=${values} />`;
      })()
    }</div>`;
};

In that case, you can do whatever you want, as long as you won't try to change DOM tags nature on the fly, 'cause not even hyperHTML can do that 👋