Match Preact behavior for boolean props on custom elements

[eps1lon]

Summary

Closes #9230 gated behind enableCustomElementPropertySupport i.e. react-dom@experimental

Implements #9230 (comment) with the exception of

 val = true;
 <x-foo bool={val}></x-foo>
-// output: <x-foo bool="true"></x-foo>
+// output: <x-foo bool=""></x-foo>

How did you test this change?

• CI
• Run attribute fixtures (should not be affected since this change is gated behind enableCustomElementPropertySupport
• https://custom-elements-everywhere.com/ with a build from this PR in libraries/react-experimental still passes all their tests

[eps1lon]

Drive-by fix that was required to get hydration mismatch warnings during development. This adds some noise to this test since there are a bunch of tests that expect more warnings than there actually are.

I started working on them by switching to toErrorDev instead and it's a lot of work to fully switch. Though it revealed some odd error messages and that you also hit #22797 in your tests. So definitely worth pursuing IMO.

[sizebot]

Comparing: 8197c73...ad479ab

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	131.58 kB	131.58 kB	=	42.15 kB	42.15 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.02%	136.82 kB	136.85 kB	+0.03%	43.68 kB	43.69 kB
facebook-www/ReactDOM-prod.classic.js	=	440.68 kB	440.68 kB	=	80.33 kB	80.33 kB
facebook-www/ReactDOM-prod.modern.js	+0.02%	425.89 kB	425.97 kB	+0.01%	78.15 kB	78.16 kB
facebook-www/ReactDOMForked-prod.classic.js	=	440.68 kB	440.68 kB	=	80.33 kB	80.33 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against ad479ab

[gaearon]

We should get @josepharhar sign off on this

[josepharhar]

Thanks for looking into this! I believe this is a good idea, and I can't find any reasons/history against going for this behavior.

Rendering as <x-foo attr=""> instead of <x-foo attr="true"> makes sense to me based on the discussion in the issue, I don't know why Preact does this. Based on my testing, Preact actually renders it as <x-foo attr=""> when server rendering, but as <x-foo attr="true"> when client rendering...

[michaelwarren1106]

is there a target release version this PR will land in? I'm curious about what to tell devs that are looking for this behavior

[eps1lon]

is there a target release version this PR will land in? I'm curious about what to tell devs that are looking for this behavior

It's out in [email protected]: https://codesandbox.io/s/boring-ardinghelli-h6wpc1?file=/src/index.js