From 8ebfb85a73daaa0164c441a2a3ddcc6b856f1964 Mon Sep 17 00:00:00 2001 From: Josh Story Date: Tue, 28 Jan 2025 10:17:08 -0800 Subject: [PATCH] [Fiber] relax DOM validation rules at root in react-dom in Dev we validate that the tag nesting is valid. This is motivated primarily because while browsers are tolerant to poor HTML there are many cases that if server rendered will be hydrated in a way that will break hydration. With the changes to singleton scoping where the document body is now the implicit render/hydration context for arbitrary tags at the root we need to adjust the validation logic to allow for valid programs such as rendering divs as a child of a Document (since this div will actually insert into the body). --- .../src/client/ReactDOMComponent.js | 4 +- .../src/client/ReactFiberConfigDOM.js | 12 +- .../src/client/validateDOMNesting.js | 72 ++++++++++-- .../react-dom/src/__tests__/ReactDOM-test.js | 12 -- .../src/__tests__/ReactDOMFizzServer-test.js | 2 - .../src/__tests__/ReactDOMFloat-test.js | 6 - .../src/__tests__/validateDOMNesting-test.js | 108 +++++++++++++++--- 7 files changed, 169 insertions(+), 47 deletions(-) diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js index 6406b734c439c..15a4ba675b5e0 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js +++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js @@ -344,7 +344,7 @@ function setProp( case 'children': { if (typeof value === 'string') { if (__DEV__) { - validateTextNesting(value, tag); + validateTextNesting(value, tag, false); } // Avoid setting initial textContent when the text is empty. In IE11 setting // textContent on a