stiff trench
So I want to create a feature for my users to create a stylesheet for their entire company, but that would require the stylesheet to only load after the user is logged in. How would that work with View Encapsulation?
Basically I want it to be possible to upload a stylesheet that could target all card-header classes that is children of a specific class in a specific component.
wooden sorrel
I'd recommend having the stylesheet only use CSS variables (aka custom properties, the var(--xx) kind, not the $xx kind)
Then encapsulation doesn't really matter
Just do
// header.component.scss
:host {
background-color: var(--theme-header-background-color/*, defaut if you want*/);
}
Can even set them from JS so you could technically skip the CSS download and just have it returned as JSON
red lantern
Maybe with a couple of small utility getter/setter, considering the dumb native one provide for JS.
wooden sorrel
You mean .style.setProperty()?
red lantern
That's not mch you can do to shorten that, but the getter on css ones:
getComputedStyle(element).getPropertyValue("--my-var");
it's not something i'd like to see repeated too many times in a file.
wooden sorrel
Ah right, if you want to get them, but here it's more about setting them
You normally don't need to read them back into the JS 😄
red lantern
Sometime can be useful to set them relative to their existing value.
Think of increase/decrease size or color manipulation.
wooden sorrel
Wouldn't that info be part of your model in the first place (but that's kinda hijacking this thread)
stiff trench
Thanks for the answer, that is great way to do it indeed. What i was thinking of doing was that a customer could set a class on an "entity" so when switched to that, the class would be present in the DOM, and therefore be picked up by the custom CSS. I would have to look into if that is possible with setting it from a JSON or similar
wooden sorrel
You could always have a placeholder <style> and just replace its source