-
Notifications
You must be signed in to change notification settings - Fork 47k
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
Conversation
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! |
ReactDOM: size: 0.0%, gzip: -0.0% Details of bundled changes.Comparing: c40075a...3fe3666 react-dom
Generated by 🚫 dangerJS |
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
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 |
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:
|
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> |
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. |
Don't close it. |
cc @trueadm on this one |
There was a problem hiding this 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
).
It seems like jsdom doesn't support shadow dom ( jsdom/jsdom#1030 ) so I can't write a test for that |
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? |
There was a problem hiding this 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
In 62861bb#diff-adeaf9850a891faf89a84c73308e0e0bR284 @trueadm mentioned:
Why? Rejecting document fragments will disable the ability that React to render in a ShadowRoot. |
@shivaylamba @trueadm I have rebased this PR. Due to conflict with React new event system, the other 3 commits are removed. Only ce0f272 (fix Again, why throws on document fragments container? It's useful when trying to wrap the React component into a web component. |
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. |
* fix: render in shadow root * fix: flow typing * Remove types and turn invariant into warning Co-authored-by: Dan Abramov <dan.abramov@me.com>
Fixes #19558
This pr fix:
ReactDOM.findDOMNode not working well with aShadowRoot
node