Allow nested ReactComponents to ignore the shadow DOM #7991
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
philippjfr
commented
Jun 18, 2025
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7991 +/- ##
==========================================
- Coverage 87.07% 87.07% -0.01%
==========================================
Files 346 346
Lines 53374 53413 +39
==========================================
+ Hits 46478 46507 +29
- Misses 6896 6906 +10 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently Bokeh components always create a shadow root that ensures they are isolated from the rest of the page. This isolation is very useful to ensure styling can be well scoped but also has a significant performance penalty. When using custom
ReactComponents this performance penalty is compounded by the fact that the shadow DOM boundary layer means that if aReactComponenthas children, who are themselvesReactComponents, we still have to create distinct React roots for each child. So now we have nested shadow roots, containing nested React roots.This PR provides an option to allow children of ReactComponents, that are themselves ReactComponents to be rendered directly into their parents React roots, bypassing the regular Bokeh
View.renderpipeline and instead embedding the child component directly as a React node. This has the major benefit that it is a whole lot faster, but also has the potential to have CSS leak across components in this setup. However, it is not uncommon for a bunch of components or even an entire to be styled very similarly, which means this is a perfectly acceptable approach.To ensure that CSS and styling still applies:
:hostselectors with explicit IDsView.elandView.containerto ensure that HTML attributes are applied to the correct nodeSince this has to be enabled explicitly this is fully backwards compatible and I'd like to test this in the wild a bit before documenting the option in more detail.