Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Apply CSS reset inside shadow roots #1195

Open
Tracked by #920
aklinker1 opened this issue Nov 21, 2024 · 5 comments · May be fixed by #1085
Open
Tracked by #920

Apply CSS reset inside shadow roots #1195

aklinker1 opened this issue Nov 21, 2024 · 5 comments · May be fixed by #1085
Labels
feature
Milestone
v1.0

Comments

@aklinker1
Copy link
Collaborator

aklinker1 commented Nov 21, 2024 •
edited
Loading

Feature Request

On discord, someone reported a general solution to resetting the few CSS properties that leak into shadow roots.

issue seemed to be solved for me, pixel perfect matching attained across websites including reddit, we just have to reset just those css properties that inherit value's by default. read here https://web.dev/learn/css/inheritance#the_initial_keyword

import "./style.css";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";

const styles = `
azimuth: initial;
border-collapse: initial;
border-spacing: initial;
caption-side: initial;
color: initial;
cursor: initial;
direction: initial;
empty-cells: initial;
font-family: initial;
font-size: initial;
font-style: initial;
font-variant: initial;
font-weight: initial;
font: initial;
letter-spacing: initial;
line-height: initial;
list-style-image: initial;
list-style-position: initial;
list-style-type: initial;
list-style: initial;
orphans: initial;
quotes: initial;
text-align: initial;
text-indent: initial;
text-transform: initial;
visibility: initial;
white-space: initial;
widows: initial;
word-spacing: initial;
z-index: 9999;
overflow: visible;
position: relative;
width: 0px;
height: 0px;
display: block;
`.trim();

export default defineContentScript({
  matches: [],
  registration: "runtime",
  cssInjectionMode: "ui",

 async main(ctx) {
    const ui = await createShadowRootUi(ctx, {
      name: "zinc-app-root",
      position: "modal",
      zIndex: 9999,
      anchor: "body",
      append: "last",
      onMount: (container, shadow, host) => {
        console.log({ container, shadow, host });
        host.style.cssText = styles;

       // Don't mount react app directly on <body>
        const wrapper = document.createElement("div");
        container.append(wrapper);
        const root = ReactDOM.createRoot(wrapper);
        root.render(<App />);
        return { root, wrapper };
      },
      onRemove: (elements) => {
        elements?.root.unmount();
        elements?.wrapper.remove();
      },
    });

   ui.mount();
  },
});

Is your feature request related to a bug?

https://discord.com/channels/1212416027611365476/1307764582969905295/1307764582969905295

What are the alternatives?

Manually setting the value of each style.

Additional context

Gonna get this added in v0.20 as a breaking change if it works.
@aklinker1 aklinker1 mentioned this issue Nov 21, 2024
Open
30 tasks
@aklinker1 aklinker1 modified the milestones: DX Improvements, v1.0 Nov 21, 2024
@aklinker1 aklinker1 linked a pull request Nov 22, 2024 that will close this issue
Draft
15 tasks
@molvqingtai
Copy link
Contributor

molvqingtai commented Nov 23, 2024 •
edited by aklinker1
Loading

I have a better solution: all: initial. It resets the styles of all elements except for font-size rem.

This is my application in an actual project, and it works well on Reddit when used with postcss-rem-to-responsive-pixel.

https://github.com/molvqingtai/WebChat/blob/a7804af09fa56e5cb3c33bc5e1b902ffd0c632ea/src/assets/styles/tailwind.css#L82

Reference：https://open-wc.org/guides/knowledge/styling/styles-piercing-shadow-dom/

@aklinker1
Copy link
Collaborator Author

aklinker1 commented Nov 23, 2024 •
edited
Loading

Great links, thanks!

I mentioned all: initial in discord, had tried it in the past, but it didn't work. Was gonna try it again while looking into this, I probably did something wrong. One of the links does mention a warning about it:

Warning

note that setting all: initial; will not reset CSS custom properties. If for some reason you find yourself needing to reset a specific property, you must specify it explicitly.

Not sure what are considered "custom" properties in this case, but something to try and figure out.

@aklinker1
Copy link
Collaborator Author

aklinker1 commented Dec 11, 2024 •
edited
Loading

Yeah, so all: initial on the host element doesn't do anything, and neither does setting individual properties to initial, like visibility: initial.

@molvqingtai In your case, all: initial is doing litterally nothing, it's the @apply above that's doing all the resetting:

https://github.com/molvqingtai/WebChat/blob/a7804af09fa56e5cb3c33bc5e1b902ffd0c632ea/src/assets/styles/tailwind.css#L79C5-L79C64

However, I was able to find something that worked: Set all: initial on the body inside the shadow root:

const resetStylesheet = new CSSStyleSheet({});
resetStylesheet.replaceSync(`
  /* WXT Shadow Root Reset */
  body {
    all: initial;
  }
`);
shadow.adoptedStyleSheets = [resetStylesheet];

Can confirm it properly reset's Reddit's visibility override, and it reset's Youtube's smaller font size! However, this doesn't work for Firefox. Firefox throws an error when setting shadow.adoptedStyleSheets... Will test more to find a solution for Firefox.

Screenshot 2024-12-11 at 11 27 50 AM

@aklinker1
Copy link
Collaborator Author

OK, this works for Chrome and Firefox:

const resetCss = `/* WXT Shadow Root Reset */
body {
  all: initial;
}`;
const resetStyle = document.createElement("style");
resetStyle.id = "wxt-shadow-root-reset";
resetStyle.innerHTML = resetCss;
shadow.querySelector("head")?.append(resetStyle);

I could have sworn I tried this in the past...

@aklinker1
Copy link
Collaborator Author

OK, so yeah, resets everything but REM units. We can leave that up to the postcss plugins.

Also, order doesn't matter - I can add the style block before or after the content script's CSS 🤔

@aklinker1 aklinker1 mentioned this issue Dec 11, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature
Projects
None yet
Milestone
v1.0
Development

Successfully merging a pull request may close this issue.

staging: v0.20.0 Breaking Changes wxt-dev/wxt
2 participants
@aklinker1 @molvqingtai