Bug: renderToString and renderToStaticMarkup skipping children for HTML custom elements about react

[emmclaughlin]

Hi @LucaDillenburg !

Thank you for the response. I should have definitely defined the problem better in my first post.

The custom element specifically is a html custom element . I'll update the title to reflect this as well.

The specific thing that causes the renderToString/renderToStaticMarkup to diverge is the hyphen (-). You can see the logic here.

I found the easiest way to reproduce would be to add a test case to ReactServerRendering-test.js . The test cause would be:

    it('children should be rendered for custom elements', () => {
      const output = ReactDOMServer.renderToString(
        <my-custom-element-a>
          <my-custom-element-b></my-custom-element-b>
        </my-custom-element-a>,
      );
      expect(output).toBe(`<my-custom-element-a><my-custom-element-b></my-custom-element-b></my-custom-element-a>`);
    });

The above will fail, as the output is actually <my-custom-element-a></my-custom-element-a> because children are skipped during the server rendering.

[sophiebits]

I believe this was just fixed in #27511! This fix will be in the next release and you can also use the latest canary build (I verified it outputs <custom-element-a><custom-element-b></custom-element-b></custom-element-a>.)

[emmclaughlin]

Thank you all for the help here 🙏

[LucaDillenburg]

Hello @emmclaughlin !

I've tried to reproduce your issue, but couldn't yet. Can you provide a minimal reproduction?

For now, this is what I've tested:

import ReactDOMServer from "react-dom/server";

const CustomElementA = ({ children }) => (
    <div>
        <h1>Hello World</h1>
        {children}
    </div>
);

const CustomElementB = ({ children }) => <p>This is a text description.</p>;

const customElements = (
    <CustomElementA>
        <CustomElementB></CustomElementB>
    </CustomElementA>
);

export const staticMarkup = ReactDOMServer.renderToStaticMarkup(customElements);
console.log(staticMarkup);
console.log(ReactDOMServer.renderToString(staticMarkup));

The result is both custom elements being printed:

<div><h1>Hello World</h1><p>This is a text description.</p></div>