Skip to content

Bug: renderToString and renderToStaticMarkup skipping children for HTML custom elements #27403

Closed
@emmclaughlin

Description

@emmclaughlin

React version: 18.2.0

Steps To Reproduce

  import ReactDOMServer from "react-dom/server";
 
  const customElements = (
    <custom-element-a>
      <custom-element-b></custom-element-b>
    </custom-element-a>
  );
  
  const staticMarkup = ReactDOMServer.renderToStaticMarkup(customElements);

  // staticMarkup resolves as <custom-element-a></custom-element-a>

The current behavior

In the current behavior, renderToString and renderToStaticMarkup skip prop types of functions and objects on custom elements (see here). However, the children prop is an object so that also gets skipped.

The expected behavior

  import ReactDOMServer from "react-dom/server";

  const customElements = (
    <custom-element-a>
      <custom-element-b></custom-element-b>
    </custom-element-a>
  );
  
  const staticMarkup = ReactDOMServer.renderToStaticMarkup(customElements);

  // staticMarkup expect to resolve as <custom-element-a><custom-element-b></custom-element-b></custom-element-a>

My proposed fix would be adding && propKey !== 'children' to this check so that children are not skipped. However, I am not sure if I am missing an alternative reason to not include children here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions