Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: React cannot render in ShadowRoot #15894

Merged
merged 3 commits into from
Aug 17, 2020
Merged

Fix: React cannot render in ShadowRoot #15894

merged 3 commits into from
Aug 17, 2020

Conversation

Jack-Works
Copy link
Contributor

@Jack-Works Jack-Works commented Jun 15, 2019

Fixes #19558

This pr fix:

  • ReactDOM.findDOMNode not working well with a ShadowRoot node
  • ReactDOM ensureListening work in this senario
<custom-element>
    #ShadowRoot: open
        <div>
            <!-- React mount on this node, not the ShadowRoot -->
        </div>
</custom-element>

@facebook-github-bot
Copy link

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

@sizebot
Copy link

sizebot commented Jun 15, 2019

ReactDOM: size: 0.0%, gzip: -0.0%

Details of bundled changes.

Comparing: c40075a...3fe3666

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.profiling.min.js +0.1% +0.1% 115 KB 115.07 KB 36.27 KB 36.29 KB NODE_PROFILING
ReactDOM-dev.js +0.1% +0.1% 917.98 KB 918.52 KB 203.84 KB 204.01 KB FB_WWW_DEV
react-dom-server.browser.production.min.js 0.0% -0.0% 19.34 KB 19.34 KB 7.23 KB 7.23 KB UMD_PROD
react-dom-test-utils.production.min.js 0.0% -0.0% 10.95 KB 10.95 KB 4.01 KB 4.01 KB UMD_PROD
react-dom-test-utils.production.min.js 0.0% -0.0% 10.71 KB 10.71 KB 3.95 KB 3.94 KB NODE_PROD
react-dom.development.js +0.1% +0.1% 894.87 KB 895.41 KB 203.45 KB 203.61 KB UMD_DEV
react-dom.production.min.js 🔺+0.1% 🔺+0.1% 111.28 KB 111.34 KB 35.81 KB 35.85 KB UMD_PROD
react-dom.profiling.min.js +0.1% +0.1% 114.72 KB 114.78 KB 36.87 KB 36.89 KB UMD_PROFILING
react-dom.development.js +0.1% +0.1% 889.16 KB 889.69 KB 201.94 KB 202.1 KB NODE_DEV
react-dom-server.node.development.js 0.0% 0.0% 133.8 KB 133.8 KB 35.43 KB 35.43 KB NODE_DEV
react-dom.production.min.js 🔺+0.1% 🔺+0.1% 111.36 KB 111.42 KB 35.34 KB 35.37 KB NODE_PROD
react-dom-server.node.production.min.js 0.0% 0.0% 20.11 KB 20.11 KB 7.54 KB 7.54 KB NODE_PROD
ReactDOM-prod.js 🔺+0.1% 🔺+0.1% 372.27 KB 372.47 KB 68.28 KB 68.32 KB FB_WWW_PROD
ReactDOM-profiling.js +0.1% +0.1% 378.6 KB 378.8 KB 69.63 KB 69.67 KB FB_WWW_PROFILING
react-dom-server.browser.development.js 0.0% -0.0% 131.88 KB 131.88 KB 34.89 KB 34.89 KB NODE_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 10.74 KB 10.74 KB 3.68 KB 3.68 KB UMD_PROD
ReactDOMServer-prod.js 0.0% 0.0% 46.67 KB 46.67 KB 10.74 KB 10.74 KB FB_WWW_PROD
react-dom-unstable-fizz.node.development.js 0.0% +0.1% 3.85 KB 3.85 KB 1.5 KB 1.5 KB NODE_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 10.48 KB 10.48 KB 3.58 KB 3.58 KB NODE_PROD
react-dom-unstable-fizz.node.production.min.js 0.0% -0.1% 1.1 KB 1.1 KB 668 B 667 B NODE_PROD

Generated by 🚫 dangerJS

@facebook-github-bot
Copy link

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

@facebook-github-bot
Copy link

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

@sravannerella
Copy link

Is this going to fix the input event propagation of shadow DOM?

@Jack-Works
Copy link
Contributor Author

Is this going to fix the input event propagation of shadow DOM?

Let me have a try. And I also need a rebase on the react codebase

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 5, 2019

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 822541c:

Sandbox Source
React Configuration

@sizebot
Copy link

sizebot commented Nov 5, 2019

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against 822541c

@Jack-Works
Copy link
Contributor Author

Is this going to fix the input event propagation of shadow DOM?

I don't get your meaning by "fix the input event propagation". My change fix the following example. Checkout if it is what you mean

<html>

<body>
  <script src="../../../build/node_modules/react/umd/react.development.js"></script>
  <!-- The latest version on unpkg won't work on this example. -->
  <!-- <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> -->
  <script src="../../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
  <div id="container"></div>
  <custom-element>
    #ShadowRoot: open
    <div>
      <!-- React mount on this node, not the ShadowRoot -->
    </div>
  </custom-element>
  <script>
    var s = document.querySelector('custom-element').attachShadow({ mode: 'open' })
    var d = document.createElement('div')
    s.appendChild(d)
  </script>
  <script type="text/babel">
    function Comp() {
      const [s, ss] = React.useState('input')
      return <span>{s}<input value={s} onChange={e => ss(e.target.value)} /></span>
    }
      ReactDOM.render(
        <Comp />,
        d
      );
    </script>
</body>

</html>

@stale
Copy link

stale bot commented Feb 3, 2020

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

@stale stale bot added the Resolution: Stale Automatically closed due to inactivity label Feb 3, 2020
@Jack-Works
Copy link
Contributor Author

Don't close it.

@stale stale bot removed the Resolution: Stale Automatically closed due to inactivity label Feb 3, 2020
@sizebot
Copy link

sizebot commented Feb 3, 2020

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 822541c

@bvaughn
Copy link
Contributor

bvaughn commented Feb 3, 2020

cc @trueadm on this one

Copy link
Contributor

@trueadm trueadm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes look promising. Thank you for taking the time to do them. I've added some suggested changes, but it would be great if you could add a Jest test too, so we can ensure this doesn't regress in the future (both for events and findDOMNode).

packages/react-dom/src/client/ReactDOMComponent.js Outdated Show resolved Hide resolved
packages/react-dom/src/client/ReactDOMComponent.js Outdated Show resolved Hide resolved
packages/react-dom/src/client/ReactDOMComponent.js Outdated Show resolved Hide resolved
packages/react-dom/src/client/ReactDOMComponent.js Outdated Show resolved Hide resolved
@Jack-Works
Copy link
Contributor Author

It seems like jsdom doesn't support shadow dom ( jsdom/jsdom#1030 ) so I can't write a test for that

@trueadm
Copy link
Contributor

trueadm commented Feb 17, 2020

Looking at this again, it clashes with some of the work we're looking into now in regards to moving event registration away from the document and to roots instead. I'd rather come back to this PR in the future (if needed).

@Jack-Works
Copy link
Contributor Author

Looking at this again, it clashes with some of the work we're looking into now in regards to moving event registration away from the document and to roots instead. I'd rather come back to this PR in the future (if needed).

fc01ed9 if so, can you cherry pick this commit at least?

Copy link

@shivaylamba shivaylamba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also Fix the merge conflicts

@Jack-Works
Copy link
Contributor Author

In 62861bb#diff-adeaf9850a891faf89a84c73308e0e0bR284 @trueadm mentioned:

We do not want to register events to document fragments or documents with the modern plugin event system.

Why? Rejecting document fragments will disable the ability that React to render in a ShadowRoot.

@Jack-Works
Copy link
Contributor Author

Jack-Works commented Mar 12, 2020

@shivaylamba @trueadm I have rebased this PR.

Due to conflict with React new event system, the other 3 commits are removed. Only ce0f272 (fix findDOMNode think DocumentFragment is a "ReactComponent") left.

Again, why throws on document fragments container? It's useful when trying to wrap the React component into a web component.

@stale
Copy link

stale bot commented Aug 2, 2020

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

This was referenced Mar 15, 2021
koto pushed a commit to koto/react that referenced this pull request Jun 15, 2021
* fix: render in shadow root

* fix: flow typing

* Remove types and turn invariant into warning

Co-authored-by: Dan Abramov <dan.abramov@me.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: In react@next ShadowRoot as rootElement in ReactDOM.render crashes
9 participants