CSS reset affects UI of Svench

[Wolfr]

trafficstars

Let's say you add a CSS file to your project, which contains a CSS reset, it affects the UI of Svench.

Reset used was Eric Meyers CSS reset, a common reset. https://meyerweb.com/eric/tools/css/reset/

[rixo]

Hmm... I wanted to avoid rendering user provided content (views) in iframes but this may be unavoidable to avoid problems like this.

I've already experimented with rendering the whole Svench UI in shadow DOM to isolate it from user CSS but it didn't work either... Inheritable CSS properties (like fonts...) still cascade inside the shadow DOM.

Do you have an idea on how to solve this?

If we go the iframe route, I wonder if we should have iframes in iframes... The thing is that Svench pages can include other Svench pages (you can render views from other pages with the <Render> component). If we have only one top level iframe (essentially the center region), then user content would be isolated from Svench UI, but individual views wouldn't be isolated from each other... Now, applying user's global CSS globally seems like the desired behaviour, and having individual views / components leak global CSS seems like a very bad practice, so I fail to appreciate if / how much that would be needed...

[Wolfr]

You can reset the styleguide components individually to support both the use cases of the user's CSS having either normalize or reset as a CSS strategy (both are common).

Then, if you the Svench UI with high CSS specificity (that is for example 2 class selectors for 20 “points”), and a namespace, they should not interfere in 95% of cases.

Example: .c-svench-ui .c-component { list-style: none; }

Let's not use iframes or shadow DOM, that's will lead to other problems.

You just need to control the SCSS scoping. I can help with this.

See this article for an explanation of what I mean by "points" https://dev.to/emmabostian/css-specificity-1kca

[rixo]

Yes, indeed, I hadn't thought this through. After my failed expedition in shadow DOM territory, I told myself Svelte CSS scoping should be enough in the great majority of cases. But your issue made me doubt about that at first.

Now I realize, this is probably just the few remaining rules in the global.css that I have kept (and built upon -- I haven't really addressed styling in Svench yet) that have been affected by your reset.

* {
	color: #666;
}

body {
	color: #333;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

It's possibly just this font rule that is affected, the rest of the UI seems to hold itself in your screenshot. (The * rule was just there for me to see how user CSS would leak into Svench UI.)

So yeah, iframes might not be a need for that. Now, following discussion on Discord with pngwn, I realize that they may be desirable to provide optimal isolation for another use case that is important to me, that is testing. Running unit tests in the browser against the "views" (i.e. component in a programmatically set state). These collections of examples provide a very good target for unit testing of UI component, as compared to alternatives like mocking everything in a fake DOM to run tests in node.

Actually, all along I've been thinking iframes would be best avoided for now, because they're increased complexity but, still, I was considering adding them as an option. I want the user to be able to opt in iframe rendering mode (which, ideally shouldn't make any visual difference).

And so, given testing has always been a high priority goal for me with Svench, now I'm curious about what kind of problems you think might arise from using iframes?

They're a bit of added complexity, for sure, but Svench is already capable of rendering a specific view given its URL, it's really its core. The UI around that is mostly "decoration", they're not hard to drop if needed. And also we'll always be all same-domain, so we'll have full control over the iframe. My main concern is performance.

Do you foresee some other problems that I may have missed with iframes?