docs: add warning about rem unit inheritance in Shadow Root UI#2330
Open
Aniket-lodh wants to merge 1 commit intowxt-dev:mainfrom
Open
docs: add warning about rem unit inheritance in Shadow Root UI#2330Aniket-lodh wants to merge 1 commit intowxt-dev:mainfrom
Aniket-lodh wants to merge 1 commit intowxt-dev:mainfrom
Conversation
✅ Deploy Preview for creative-fairy-df92c4 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Collaborator
|
@Aniket-lodh Are you able to add example on But let's do it in other PR and link this one as a "base". |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2330 +/- ##
==========================================
- Coverage 79.73% 79.67% -0.06%
==========================================
Files 131 131
Lines 3804 3804
Branches 861 861
==========================================
- Hits 3033 3031 -2
- Misses 686 688 +2
Partials 85 85 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
@wxt-dev/analytics
@wxt-dev/auto-icons
@wxt-dev/browser
@wxt-dev/i18n
@wxt-dev/is-background
@wxt-dev/module-react
@wxt-dev/module-solid
@wxt-dev/module-svelte
@wxt-dev/module-vue
@wxt-dev/runner
@wxt-dev/storage
@wxt-dev/unocss
@wxt-dev/webextension-polyfill
wxt
commit: |
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.
Overview
When using
createShadowRootUi, the Shadow DOM isolates most CSS from the host page. However,remunits are not isolated because they are relative to the root<html>element'sfont-size, which lives outside the Shadow Root. If the host website sets a customfont-sizeon<html>(e.g., Reddit usesfont-size: 10px), allrem-based styles inside the Shadow Root will scale incorrectly — making the extension UI appear too large or too small depending on the site.WXT v0.20+ added
all: initialto reset inherited properties, and the upgrade guide already mentions thatremunits are not affected. However, this warning is buried in the upgrade docs and not discoverable by users reading the content scripts guide — which is where most developers go to learn aboutcreateShadowRootUi.This PR adds:
:::warningblock in the Shadow Root section of the Content Scripts guide explaining thereminheritance edge case, with a concrete fix usingpostcss-rem-to-responsive-pixel— including PostCSS config examples for both ESM and CJS setups with Tailwind CSS integration.Manual Testing
bun run docs:dev/guide/essentials/content-scripts→ scroll to the Shadow Root section → verify the warning block renders correctly after the example links, with working code-group tabs (ESM/CJS)/guide/resources/faq→ verify the new entry appears in the table of contents and the internal link to the content scripts guide worksgit diff --name-onlyshould only showdocs/guide/essentials/content-scripts.mdanddocs/guide/resources/faq.md)Related Issue
This PR addresses #678