1624487 - [meta] Scope XUL custom element styles

Status: NEW

(Toolkit :: Themes, task)

Description

[Tim Nguyen :ntim]

+++ This bug was initially created as a clone of Bug #1624482 +++

I think it'd be nice to try componentizing the styling of our custom elements a bit more. Right now, we import chrome://global/content/widgets.css or chrome://global/skin/global.css (which itself includes widgets.css) in every single custom element using shadow DOM. widgets.css includes 22 stylesheets which isn't ideal.

To make better use of web components, it would make more sense for each CE to only include styles for its own component.

For this to work however, all CEs must start using shadow DOM, which involves:

• changing the component stylesheet to work with shadow dom
• rewriting external stylesheets to use shadow parts

Comment 1

[Tim Nguyen :ntim]

My main goal was to clearly separate shadow DOM styles from non-shadow styles, and avoid mixing them in the same stylesheet. After bug 1624907, bug 1625720 and bug 1625721, that goal is achieved and only global.css will import widgets.css.

After those 3 bugs, I'm thinking of moving the widgets.css imports into global.css.

Dão, what do you think of merging widgets.css into global.css for the time being? I don't think I'll have time to scope everything, so this will be a good first step to prevent future consumers from importing widgets.css. If someone needs to use a stylesheet like button.css in a shadow root, they should just import that individual stylesheet.

Comment 2

[Dão Gottwald [:dao]]

Sounds okay to me.