Block elements inside p cause rehydration failures

[aghassemi]

Example:
<p> <div> foo </div> </p>

Browser close p when seeing a block element inside, so, for example above, they end up creating a DOM that matches <p></p> <div></div> instead.

I suspect Simple DOM used in Fastboot does not behave the same, this results in rehydration markers getting messed up and ends with rehydration errors on the client side halting the whole app.

/cc @krisselden @rwjblue

[rwjblue]

Unfortunately, this isn't really a bug here in fastboot, generally speaking we can't autocorrect every form of invalid HTML (where the browser does a correction)...

We should be linting against using block level elements within a <p> when they occur within a single template (e.g. not due to component invocation), and the rehydration system should properly clear the invalid / unknown contents of the <p> and resume rehydrating.

[st-h]

Thanks for keeping this open. Just wondered why the fastboot render would lead to different output than the browser rendered version. Just learned that putting a <div> into a <p> element actually is invalid syntax 🤦‍♂️