facebook/react

'data-reactroot' attribute missing in 16.0.0

carruthe opened this issue · 5 comments

carruthe commented

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
With versions prior to 16, React added a 'data-reactroot' attribute to the generated div wrapping the render. I rely on this attribute in order to select the div with css (in my case to make it height 100% so it fills its container).

e.g.
#root > [data-reactroot] { height: 100%; width:100%; }

With version 16, this attribute no longer appears, and I can't easily select the div with CSS. I can hack it in Javascript, but it was a lot cleaner with the 'data-reactroot' attribute.

Before version 16

reactroot-pre16

##After Version 16
reactroot-gonewith16

iamdustan commented

This is an intentional change. https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67 [data-reactroot]was an implementation detail.

You can add your own id or className hook for that on your root component to accomplish.

  • 👍1
krizzu commented

Hey @carruthe,

You can use selector #root div:first-child { height: 100%; width:100%; } to match first div under #root

  • 👍1
TrySound commented

Or even spread your app component

render() {
  return (
    <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
      My App
    </div>
  );
}
  • 👍2
aweary commented

Sorry if it unexpectedly broke anything for you @carruthe! As mentioned it was an implementation detail which shouldn't have been used, though we understand that's easier said than done 😄 The suggestions listed above are hopefully good solutions for you.

@gaearon maybe we should add a note about this to the v16 blog post? I'm sure there are others who have been relying on those attributes.

  • 👍4
carruthe commented

@aweary - Thanks - I understand, it's the risk one takes when using undocumented features! The suggestion from @TrySound worked for me. Thanks!

  • 👍2