docs: add warning about rem unit inheritance in Shadow Root UI#2330
docs: add warning about rem unit inheritance in Shadow Root UI#2330Aniket-lodh wants to merge 7 commits intowxt-dev:mainfrom
Conversation
✅ Deploy Preview for creative-fairy-df92c4 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
@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: |
|
@PatrykKuniczak Hey I added a minimal example on |
Co-authored-by: Patryk Kuniczak <p.kuniczak@gmail.com>
Co-authored-by: Patryk Kuniczak <p.kuniczak@gmail.com>
Co-authored-by: Patryk Kuniczak <p.kuniczak@gmail.com>
Co-authored-by: Patryk Kuniczak <p.kuniczak@gmail.com>
Co-authored-by: Patryk Kuniczak <p.kuniczak@gmail.com>
There was a problem hiding this comment.
You can't set text next to [!WARNING[.
Like smah mentioned here:
https://github.com//pull/2336#issuecomment-4394097768
Let's see how it looks on github.
https://github.com/Aniket-lodh/wxt/blob/7a94f07344d67c6e5321c73aabca0ebaf3020a1c/docs/guide/essentials/content-scripts.md
Let's check it next time, if everything is OK, before you'll request any review.
You're almost there 😄
2 participants
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