Hyperhtml: Always render HTML in component

[davidmerrique]

I have a component that can take either DOM nodes or strings, and I always want to render HTML.

Should I do it like this?

function container(contents) {
  return hyperHTML.wire()`
  <div>
    ${{
      [typeof contents === 'string' ? 'html' : 'any']: contents
    }}
  </div>
  `
}

document.body.appendChild(container('<p>Hi</p>'))
document.body.appendChild(container(hyperHTML.wire()`<p>Hi</p>`))

Thank you

[WebReflection]

I'd simplify the approach via:

function container(contents) {
  return hyperHTML.wire()`
  <div>
    ${typeof contents === 'string' ? [contents] : contents}
  </div>`;
}

Please watch out if you use wires without a reference you're trashing the DOM/layout every single time you invoke it.

It's OK for a one-off, but it's not ideal when you have many updates.
https://viperhtml.js.org/hyperhtml/documentation/#api-1-0