Warning #3394

cucar · 2022-01-06T18:57:39Z

cucar
Jan 6, 2022

I spent hours trying to debug a layout shift issue on our website. I tracked it down to Preact and I think what I found should be shared in Preact documentation somewhere. This is probably an issue for other frameworks as well but I had not heard about it before. Here's the thing: if you have a div in a p, Preact render will work but it will be inefficient and you may see some DOM updates. The main reason is coming from the browser. Check this out:

<html>
<body>
	<div id="root"><p><div>test</div></p></div>
	<script>console.log(document.getElementById('root').children)</script>
</body>
</html>

What do you think this would return? If you guessed p element, that's wrong. It actually returns this: HTMLCollection(3) [p, div, p]

It breaks the paragraph into three pieces. The weird part is that webkit will actually insert div elements in p when you edit it in contenteditable mode and press enter in it.

In any case, users should be wary of not using div inside p in order to avoid this inefficiency. I think it would be a good idea to add this somewhere in Preact documentation.

gu-stav · 2022-01-06T19:45:23Z

gu-stav
Jan 6, 2022

Hi Cucar, I believe this issue has been mentioned in the past and it's due to the fact that div Elements aren't allowed as children of phrasing content elements, which a p is. This therefore is expected browser behavior.

2 replies

marvinhagemeister Jan 7, 2022
Maintainer

This is the correct answer. Putting a div-element inside a p is invalid HTML. When browsers encounter broken HTML they try to guess as best as they can what the developer intended to express. When a block element like a div is encountered inside a p it will autoclose the paragraph, insert the block element and then continue with a newly opened paragraph, hence the [p, div, p] collection in the DOM.

We have some light DOM hierarchy validation in preact/debug, mostly for tables. We could certainly think of adding more validation rules there. The slight performance cost in those additional checks is probably worth it.

rschristian Aug 8, 2023
Collaborator

For any future readers: #4093

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Warning #3394

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Warning #3394

cucar Jan 6, 2022

Replies: 1 comment · 2 replies

gu-stav Jan 6, 2022

marvinhagemeister Jan 7, 2022 Maintainer

rschristian Aug 8, 2023 Collaborator

cucar
Jan 6, 2022

Replies: 1 comment 2 replies

gu-stav
Jan 6, 2022

marvinhagemeister Jan 7, 2022
Maintainer

rschristian Aug 8, 2023
Collaborator