Closed Bug 1624482 Opened 2 years ago Closed 2 years ago

Scope menulist styles to its own component using shadow DOM

Categories

(Toolkit :: Themes, task, P3)

task

Tracking

()

RESOLVED FIXED
mozilla77
Tracking Status
firefox77 --- fixed

People

(Reporter: ntim, Assigned: ntim)

References

(Blocks 1 open bug)

Details

Attachments

(3 files)

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

menulist.js would be a good candidate to start with after bug 1624454.

Attachment #9135277 - Attachment description: Bug 1624482 - Scope menulist styles to its own component ususing shadow DOM. → Bug 1624482 - Scope menulist styles to its own component using shadow DOM.
Blocks: 1624487
Priority: -- → P3
No longer depends on: 1624454
Depends on: 1626485
Assignee: nobody → ntim.bugs
Status: NEW → ASSIGNED
Depends on: 1624968
No longer depends on: 1624968
Depends on: 1627568

(In reply to Tim Nguyen :ntim from comment #2)

Looks like try isn't super happy: https://treeherder.mozilla.org/#/jobs?repo=try&revision=72a15d28ce2e86e8aaff9e9250094d98365e974a

Will have to investigate :(

Bug 1627568 should fix the reftest failures.

The select-related failures were due to popuponly not working at all, this is because the shadowRoot was created all the time (even with popuponly) as the constructor doesn't know about the element's attributes yet. To fix this, I appended a slot into the shadow root when popuponly was used (since you can't create a shadow root conditionally).

Pushed by ntim.bugs@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/86530e261ad5
Scope menulist styles to its own component using shadow DOM. r=dao
https://hg.mozilla.org/integration/autoland/rev/1319738e81d2
Adapt menupopup accessible to query the correct parent element when slotted. r=emilio
Summary: Investigate using shadow DOM for menulist → Scope menulist styles to its own component using shadow DOM
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla77
Pushed by ntim.bugs@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/7471a82a3d5b
Followup: Adapt to changes in bug 1590573. r=emalysz
See Also: → 1628701
You need to log in before you can comment on or make changes to this bug.