Export class on all components / stable API access (never change s-app etc.)

[FunMiles]

MaterialApp has to surround the complete component and creates a simple

<div class="s-app theme--{theme}">
  <slot />
</div>

That is simple enough. But the s-app class is not defined as a stable API attribute. Trying to style the <div/> (for example setting some flex details for it) requires to use the global s-app. Could it be possible to specify additional class memberships via an attribute?

[TheComputerM]

What do you have in mind?

[FunMiles]

I am not entirely sure at this point. I only started Svelte a week ago. The simplest thing to start with would be to document the class 's-app' as being a stable class to which MaterialApp belongs. Beyond that, it's more of a show-off feature. As in, if someone wants to have two sub-apps within the same window, each having a different MaterialApp (e.g. a demo wanting to demonstrate light-theme and dark-theme side by side of the same app), then being able to add a name to the list of classes as in: <MaterialApp extraclasses='demo_1'> ...

[Florian-Schoenherr]

@FunMiles css:

.s-app.theme--dark {
/*styles*/
}
.s-app.theme--light {
/*styles*/
}

should work, right? Or you can wrap the MaterialApp in a div and style that instead. Also I don't really know what "requires to use the global s-app" means, because you can't really change MaterialApp's classes from the outside, other than with global classes. If you want:

<div {style} class="s-app theme--{theme}">
  <slot />
</div>

we can maybe do that..

@TheComputerM We could add style/class exports to every single component, does that hinder any sort of performance/..?

[FunMiles]

@Florian-Schoenherr The wrapping did not work for me. I had that to start with. I am writing a single page framework in which I need to enforce a flex distribution. Somehow with the wrapping, that did not do the job because there's something associated with the s-app. I did however use

:global(.s-app)  {
  /* style */
}

:global(.s-app-bar) {
/* style*/
	}

The point I made is not that it is impossible to style, but that it relies on an implementation detail (the classes s-app and s-app-bar) that could be changed in the future. Having a stable API access is a desired feature I have of frameworks.

[Florian-Schoenherr]

Oh. I think it's not planned to change ever, but you're right. Other components already export class and style, so if it gets approved we'll do it 👍