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 |
|
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? |
|
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 aShadowRootnode