Open Bug 1624487 Opened 6 months ago Updated 5 months ago

[meta] Scope XUL custom element styles


(Toolkit :: Themes, task)

Not set




(Reporter: ntim, Unassigned)


(Depends on 5 open bugs)


(Keywords: meta)

+++ 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
Depends on: 1624488
Depends on: 1624865
Depends on: 1624882
Depends on: 1624888
Depends on: 1624904
Depends on: 1624905
Depends on: 1624907
Depends on: 1624919
Depends on: 1625314
Depends on: 1625720

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.

Flags: needinfo?(dao+bmo)

Sounds okay to me.

Flags: needinfo?(dao+bmo)
Depends on: 1632181
Summary: [meta] Remove stylesheets from chrome://global/content/widgets.css → [meta] Scope XUL custom element styles
No longer depends on: 1624904
You need to log in before you can comment on or make changes to this bug.