Join Discord
Channels
help-with-umbraco
news
event-news
social
help-with-other
contributing
package-development
codegarden-conference
hacktoberfest
show-and-tell
jobs-and-gigs
meta
Powered by
Does it matter if the existing styles (loaded by t...
# package-development
m
Mark Drake
01/09/2022, 8:10 PM
Does it matter if the existing styles (loaded by the Umbraco backoffice) apply to your dashboard as well? Because in that case - you can scope your CSS to a unique classname. Here's a quick GIST on SASSmeister:
https://www.sassmeister.com/gist/00a7c284db1a82404bad1628ed4b3173?token=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&scope=gist,read:user
If you want to fully encapsulate your dashboard so there are no styles from Umbraco, and your stylesheets don't leave your dashboard I think you'll have to use a web component and the shadow DOM to get that affect. [screenshot attached] Off the top of my head I'm not sure what the right approach to building your dashboard would be using the shadow dom, seems difficult because you'd also want to make use of some of the ootb angular directives and services I'm sure? Seems messy. You'd need to repeat this logic:
https://github.com/umbraco/Umbraco-CMS/blob/5bfab13dc5a268714aad2426a2b68ab5561a6407/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistblock.component.js
I'd go with approach A - just apply enough scope to your CSS output so that it doesn't affect the rest of the backoffice.
Previous
Next