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.
Feature Request
On discord, someone reported a general solution to resetting the few CSS properties that leak into shadow roots.
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.