If {someValue} in <Title>{someValue}</Title> evaluates to a falsified value, <title sm="..." /> is rendered which is invalid

[krymel]

Hi,

Initially, I did this in my codebase:

<Title>{errorReport().code || ''}</Title>

because of https://github.com/solidjs/solid-meta/blob/main/src/index.tsx#L222 [falsification trenary operation], empty string as well as undefined leads to a rendering of <title sm="..." /> which the browser autocorrects and breaks hydration and rendering of all succeeding elements (at least in Chrome).

I tried to fix it by simply doing a quick hack for the moment:

<Title>{errorReport().code || ' '}</Title>

which leads to a rendering of two TextNodes, one that contains the {errorReport().code} and another one that is the space.

Only providing actual content as an alternative like:

<Title>{errorReport().code || 'Loading...'}</Title>

Leads to a correct rendering.

The issue only happens when you do server-side rendering combined with multiple client-side renders where the first iteration clears to empty/falsified value for the CDATA followed by a single TextNode as CDATA.

I'd suggest the following fix:
return tag.props.children || tag.tag === 'title'

which leads to a correct rendering. Closing <title> without an actual closing tag can never be valid.

Thanks and best