Styling of content script is inconsistent across different pages.

chan-dev commented 1 year ago

Describe the bug

The UI of the content script that is injected is inconsistent depending on the page it is injected into. For instance, the UI appears smaller when you visit stackoverflow.com but looks bigger on others.

Shadow DOM doesn't fully encapsulate the styling. Upon further investigation, it appears that CSS frameworks such as unocss uses relative font-sizing (e.g rem, em, etc) and this causes problems in the styling of the elements under Shadow DOM. The reason is that rem is relative to the html element of the current page and not to the shadow root, and thus unocss css classes are resized based on what is set as the root font size on the html element of the current page.

Reproduction

replicable on main branch

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 4.61 GB / 7.66 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Chromium: 111.0.5563.110
    Firefox: 111.0.1

Used Package Manager

pnpm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

patrikb42222 commented 9 months ago

Hey, I'm having trouble adding any styles to the shadow root of my vitesse webext project, can you please provide an example?

chan-dev commented 9 months ago

It's been a while since i've worked on browser extensions and shadow dom, but AFAIK you can get around this by injecting a style on the shadow root itself. Read more about this topic on this post.

OTOH, we must also know the distinction between shadow host and shadow root. If you're simply trying to style the wrapper element that contains the entire Shadow Tree, then we may style it using :host selector.

antfu-collective / vitesse-webext