preactjs
preact/debug: Incorrect table warning
- [x] Check if updating to the latest Preact version resolves the issue
Describe the bug
preact/debug throws a warning when the code is valid HTML code. That's unexpected.
To Reproduce
import "preact/debug";
import { render } from "preact";
render(<table><tr /></table>, document.getElementById("app"));
Expected behavior
No warning, it's a valid HTML structure. Iirc there are some rules regarding tbody when it must be present and not. I don't know them at the top of my head, best to check with the spec.
I originally noticed this with a complete table structure, including thead and tbody. I was also getting warnings about those elements needing a table parent (which they had).
@marvinhagemeister this does not warn for me https://codesandbox.io/s/damp-dream-td65f3?file=/src/index.js
This vdom structure does result in HTML which doesn't match the vdom and is modified during hydration.
See this (admittedly canned) example where there's a flash of styling change when hydration happens: https://codesandbox.io/s/busy-williams-scnwzw?file=/src/index.mjs
Interesting! Looks like the browser automatically inserts a <tbody> element.
This doesn't throw/log an error, but it should; while the spec technically allows for <tr> to be a child of <table>, it does this knowing full well that all parsers will instead wrap it inside of a <tbody>.
We should warn here.
