Add hack to work around issue with shadow DOM and @property#7293
Merged
robertknight merged 1 commit intomainfrom Sep 15, 2025
Merged
Add hack to work around issue with shadow DOM and @property#7293robertknight merged 1 commit intomainfrom
robertknight merged 1 commit intomainfrom
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7293 +/- ##
=======================================
Coverage 99.46% 99.47%
=======================================
Files 271 271
Lines 10930 10947 +17
Branches 2614 2618 +4
=======================================
+ Hits 10872 10889 +17
Misses 58 58 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
In preparation for the migration to Tailwind v4, add a workaround for tailwindlabs/tailwindcss#15005. @Property declarations are ignored by current browsers in Shadow DOM. Tailwind v4's styles rely on these properties. In the Hypothesis client this noticeably affects borders of elements in the sidebar container and shadows on the adder. This commit works around this by duplicating @Property declarations from annotator.css inside the main document. In order to make this possible, the annotator.css stylesheet must be loaded with the `crossOrigin` property set so that it can be read by JS code.
robertknight
force-pushed
the
shadow-dom-property-workaround
branch
from
6b2e2cf to
16820bd
Compare
acelaya
approved these changes
Sep 15, 2025
| // the top-level document. | ||
| if (propertyStyleSheet === undefined) { | ||
| propertyStyleSheet = new CSSStyleSheet(); | ||
| const sheet = propertyStyleSheet; |
Contributor
There was a problem hiding this comment.
Is there a reason for this local sheet variable?
Contributor
Author
There was a problem hiding this comment.
Yes, it makes it clear to TS that sheet won't be redefined before the event handler is invoked. Otherwise TS complains, correctly, that it can't be sure propertyStyleSheet is defined in the callback.
This was referenced Sep 15, 2025
Merged
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
In preparation for the migration to Tailwind v4, add a workaround for tailwindlabs/tailwindcss#15005.
@propertydeclarations are ignored by current browsers in Shadow DOM. Tailwind v4's styles rely on these properties. In the Hypothesis client this noticeably affects borders of elements in the sidebar container and shadows on the adder.This commit works around this by duplicating
@propertydeclarations from annotator.css inside the main document. In order to make this possible, the annotator.css stylesheet must be loaded with thecrossOriginproperty set so that it can be read by JS code.