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 · 2 comments · May be fixed by #1085
Open
Tracked by #920

Apply CSS reset inside shadow roots #1195

aklinker1 opened this issue Nov 21, 2024 · 2 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
12 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.

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