Docs should speak to the differences between html`` TTLs in other frameworks

[jessehattabaugh]

Enhance is not the first framework to construct DOM from an html tagged template literal. For example LitHTML also uses a TTL, and so some users may be familiar with using it. The difference between LitHTML and enhance is that LitHTML requires all the strings that you concat to be html. Enhance only requires the return value of the function to be tagged. It could eliminate some confusion if this were called out explicitly.

[kristoferjoseph]

Can you elaborate on this a bit? Maybe a code example would help me understand what it is specifically that I can add to make this more clear. We don't do comparisons as not to be perceived as throwing shade at other people's hard work, but I feel that there is a subtle distinction here you are trying to outline that is lost on me.

Thanks!

[jessehattabaugh]

I think that this section needs to be rearranged: https://enhance.dev/docs/learn/concepts/html/

The index should explain the concepts of Custom Element expansions, and maybe the differences between that and the "pages" which are authored in *.html files.

Then, after you introduce the concept of render functions, you should mention the argument object and explain the purpose of it's two properties state and html.

The current index.mjs doesn't actually talk about the html argument and how it is supposed to be used, so I think there could be a new page which does so. It could read like this:

"render functions receive an argument with a property called html. The return value of the render function must be a tagged template literal that uses the html function as a tag. This function allows you to construct dynamic markup by adding variable values inside of ${} {whatever those are called}."

here's the important part:

"Note: many popular frameworks allow you to construct markup with a TTL. Enhance's html does not require that all strings included in ${} also be html tagged template literals."

"Example:

in LitElement

html`
  ${user.isloggedIn
      ? html`Welcome ${user.name}`
      : html`Please log in`
  }
`;

in enhance it's just:

html`
  ${user.isloggedIn
      ? `Welcome ${user.name}`
      : `Please log in`
  }
`;