-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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
feat: shadow root support #2138
Conversation
I think there was a similar issue with rendering into sourceless iframes. Perhaps this patch could be adapted to include support for that use case too? |
And it's possible this overlaps with the issue for using multiple windows (i.e., roots) in an electron environment #1765 |
@jon-w1 following up on the comments above. Thanks |
Here I am creating a fix for multiple windows/iframes https://github.com/zarubond/react-native-web/tree/zarubond/multi_root |
* Improves React Native compatibility by making StyleSheet.create the identify function. * Improves React 18 support by inserting styles on eval. * Supports use with multiple windows (i.e., iframes) and shadow roots. * Supports nested LTR/RTL layouts. * Supports 3rd party compilers and extraction to static CSS. * Fixes static and dynamic short/longform deduplication. * Reduces browser support: Safari 10.1+, Chromium Edge, no IE, no legacy Android browsers. * Removes automatic vendor-prefixing of inline styles (for better perf). * Removes focus-visible polyfill as modern browsers no longer show focus rings for mouse interactions. Close #2208 Fix #2138 Fix #2196 Fix #2007 Fix #1517
* Improves React Native compatibility by making StyleSheet.create the identify function. * Improves React 18 support by inserting styles on eval. * Supports use with multiple windows (i.e., iframes) and shadow roots. * Supports nested LTR/RTL layouts. * Supports 3rd party compilers and extraction to static CSS. * Fixes static and dynamic short/longform deduplication. * Reduces browser support: Safari 10.1+, Chromium Edge, no IE, no legacy Android browsers. * Removes automatic vendor-prefixing of inline styles (for better perf). * Removes focus-visible polyfill as modern browsers no longer show focus rings for mouse interactions. Close necolas#2208 Fix necolas#2138 Fix necolas#2196 Fix necolas#2007 Fix necolas#1517
Background
Importing
react-native-web
kicks offStyleSheet
resolution on a singlestyle
element which gets added to thehead
of the HTML document. However, when rendering an application within a Shadow DOM root (e.g. when encapsulating within an HTML custom element), any stylesheets from the maindocument
are ignored.Issue Link
#1517
In This Update
renderApplication
to check if therootTag
'sRootNode
is ofShadowRoot
type. If so, an additionalstyle
tag is added to the shadow rootcreateStyleResolver
to insert any new rules into both the document-level stylesheet as well as any additional shadow root stylesheetsThis is my first PR for RNW so let me know if there's anything else I should consider!