Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add debug warnings for <p> end tag omission parsing rules #4093

Closed
marvinhagemeister opened this issue Aug 8, 2023 · 2 comments · Fixed by #4108
Closed

Add debug warnings for <p> end tag omission parsing rules #4093

marvinhagemeister opened this issue Aug 8, 2023 · 2 comments · Fixed by #4108

Comments

@marvinhagemeister
Copy link
Member

marvinhagemeister commented Aug 8, 2023

The HTML spec has some special cases surrounding the <p> tag: https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element

A p element’s end tag can be omitted if the p element is immediately followed by an address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, search, section, table, or ul element, or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element, or an autonomous custom element.

This leads to cases where:

 <p>
   <h1>hello</h1>
 </p>

...will be turned into this by the browser:

<p></p>
<h1>Hello</h1>
<p></p>

This confuses Preact as it's sort of a hydration mismatch and the vnode tree doesn't match the HTML anymore.

@nmain
Copy link

nmain commented Aug 8, 2023

Could this include other non-<p> scenarios? For instance, this:

<table><tbody><tr><table></table></tr></tbody></table>

can be created in (p)react clientside or raw dom. But if rendered to string on a server, and then later parsed by the browser's HTML parser, it will parse as:

<table><tbody><tr></tr></tbody></table><table></table>

@marvinhagemeister
Copy link
Member Author

Sure, that's a good idea!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants