[React 19] Omit the false value for custom element is an incorrect behaviour

[PupilTong]

Summary

The false value could be selected by a attribute selector.

<custom-element an-attr="false"></custom-element>
<style>
custom-element[an-attr="false"]:defined{
   background:pink;
}
</style>

[raji2004]

can i be assigned this task

[PupilTong]

can i be assigned this task

Thanks a lot!

I understand that there could be a workaround by migrate from the boolean to string literal "false":

<custom-element an-attr={"false"} /> 

However this requires developers change their code everywhere for migrating from React 18 to React 19. This could be expensive for developers to modify their implementations with huge codebase. Particularly, the Web components library and the React components library may be maintained by different teams.

[mathewalexKerala]

can i be assigned this task

Are you doing this task ? Or can I do this

[surenpoghosian]

@PupilTong

what's the difference between this: <custom-element an-attr="false"></custom-element> and this: <custom-element an-attr={"false"} />

In both the value of an-attr is wrapped inside a string.

[PupilTong]

@PupilTong

what's the difference between this: <custom-element an-attr="false"></custom-element> and this: <custom-element an-attr={"false"} />

In both the value of an-attr is wrapped inside a string.

https://react.dev/blog/2024/04/25/react-19#support-for-custom-elements

Sorry, forget to mention the SSR env.

[surenpoghosian]

@PupilTong what's the difference between this: <custom-element an-attr="false"></custom-element> and this: <custom-element an-attr={"false"} /> In both the value of an-attr is wrapped inside a string.

https://react.dev/blog/2024/04/25/react-19#support-for-custom-elements

Sorry, forget to mention the SSR env.

As I understand, you want to use false value, but it is being omitted by react(19)... Because it is a non-primitive type...

Here is a temporary solution:

you can set it to false by default for that argument an-attr, and mention it in the component's properties only when it is true

[PupilTong]

@PupilTong what's the difference between this: <custom-element an-attr="false"></custom-element> and this: <custom-element an-attr={"false"} /> In both the value of an-attr is wrapped inside a string.

https://react.dev/blog/2024/04/25/react-19#support-for-custom-elements Sorry, forget to mention the SSR env.

As I understand, you want to use false value, but it is being omitted by react(19)... Because it is a non-primitive type...

Here is a temporary solution:

you can set it to false by default for that argument an-attr, and mention it in the component's properties only when it is true

Thanks for your reply! But omitting the false boolean value is incorrect and it's breaking the react 18.

The false value is important because typically web component developers implement the custom element with CSS Selectors, such as Type Selector, Attribute Selector. Unlike React component, I think it's not a good idea which assumes all behaviors of custom elements are driven by JavaScript. For example, when we have an attribute responding to a false value, in most cases, we could use attribute selector with [an-attr="false"]::part(), :host-context([an-attr="false"]), ::slotted([an-attr="false"]) without any related JavaScript code. This will help web developers to improve the performance of custom elements. Especially we may use :define selector and customeElementRegistry.upgrade method to lazy load custom elements.

Could React 19 reconsider this behavior? Or could we have some configurations on renderToString function? Or even an attribute a flag for this (like <custom-element __react-do-not-omit={true} /> )?

Thanks again!