When to use the Milo createTag() method

[cmiqueo]

Which one of these two approaches will be most favorable? createTag() vs Template Literal:

// option 1

  const background = createTag('div', { class: 'background' });
  const imgDesktop = createTag('img', { class: 'background', src: metadata.imagedesktop });
  const picture = createTag('picture', null, imgDesktop);
  const desktopOnly = createTag('div', { class: 'desktop-only' }, picture);
  background.append(desktopOnly);
  marquee.append(background);

// option 2

  const background = createTag('div', { class: 'background' });
  background.innerHTML = `<div ='desktop-only'> 
    <picture>
      <img class="background" src="${metadata.imagedesktop}" />`
    </picture>
  </div>`;
  marquee.append(background);

[auniverseaway]

I think both are fine. Both work and I think depending on your use case, you can use either.

createTag was born out of needing to do a lot of DOM creation that required attaching events. It's also helpful when you have to build DOM as a result of async / await or even promise based results. You can build part of your DOM to show the user something while you fetch data in the background.

When you use innerHTML, you then have to use querySelector to attach events and I felt it was better to have a small abstraction around document.createElement rather than building DOM up as strings, only to then query for what you had just created.

We had this discussion at lunch the other day, but there are other approaches to abstract createElement and everyone feels like their approach is the, "the best." From a platform support perspective, we felt like having something that was terse, performant, and could be understood in under 120 seconds was a better alternative to something more declarative, but required more training or didn't meet our performance goals.

Even with Lit or Preact's declarative html syntax, there's a bit of learning curve and you don't have as fine grained await control without learning even more custom syntax like until.