See bug 1505489 comment 17 and following.

But... it's not 100% clear to me where in the cascade they should go. Also, should they apply to all shadow trees or just to the top level?

::slotted has kinda the same problem I guess.

Actually, what's the point of this? All user stylesheets apply in Shadow DOM already, so you can target the node you want, can you not?

All user stylesheets apply in Shadow DOM already, so you can target the node you want, can you not?

Yes and no. Let's say you want to change the background color of the bookmarks menu. The following code works indeed:

.panel-arrowcontent {
  background: orange !important;
}

But this code applies for all elements with the "panel-arrowcontent" class. I didn't check if there are other occurences, so maybe it's not the best example. But I hope it's good enough to understand the problem. To target only the one menu I want to change I can't do something like:

#BMB_bookmarksPopup .panel-arrowcontent {
  background: orange !important;
}

So instead I would do something like the following:

#BMB_bookmarksPopup::part(arrowcontent) .panel-arrowcontent {
  background: orange !important;
}

But this codes doesn't work.

Firefox already makes use of the ::part syntax (see https://searchfox.org/mozilla-central/search?q=%3A%3Apart&path=.css) and to override some of these rules (or other rules in the future) it would also be helpful to be able to use the same syntax.

(In reply to Sören Hentzschel from comment #2)

So instead I would do something like the following:

#BMB_bookmarksPopup::part(arrowcontent) .panel-arrowcontent {
  background: orange !important;
}

But this code doesn't work.

That’s working as intended because pseudo‑elements are leaf nodes.

That’s working as intended because pseudo‑elements are leaf nodes.

True, makes sense. Thank you.

Yeah, probably what you want is something like :host(#BMB_bookmarksPopup) .panel-arrowcontent (not 100% sure :host will work properly in user stylesheets off the top of my head, but worth a shot?).

:host() and :host-context() don't seem to work in user sheets either.
Check this internal rule: #BMB_bookmarksPopup menupopup[nofooterpopup="true"]::part(popupbox) {padding-bottom: 4px;}
Unsetting the padding with this selector obviously doesn't work. The elements this applies to are class .popup-internal-box. Trying #BMB_bookmarksPopup .popup-internal-box doesn't work, nor does :host(#BMB_bookmarksPopup) .popup-internal-box. Recently I'm trying to get around this issue by loading the css as an author sheet with js. But it would really be nice if I could do this with just CSS since the actual meat of the code is so trivial.

(In reply to shmediaproductions from comment #6)

:host() and :host-context() don't seem to work in user sheets either.

:host‑context() isn’t implemented in Firefox at all, see bug 1082060 and w3c/csswg‑drafts#1914 for details.

Hi,
just found this bug when upgrading from FF 78 to 91 and trying to revert some of the UI changes via userChrome.css. E.g. I'd like to get back the more obvious shadow for tab overflow, but for this I'd need to use the selectors
#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator) and
#tabbrowser-arrowscrollbox::part(overflow-start-indicator)

Is there any chance we get shadow parts in userChrome.css at some time?
cu,
Frank

I'm not sure you need that since user sheets are applied to shadow trees. So I think you can use something like :host(#tabbrowser-arrowscrollbox) [part="overflow-start-indicator"]?

That doesn't work or I'm doing it wrong. In the developers tools the dom part is this:

<arrowscrollbox id="tabbrowser-arrowscrollbox"...
    #shadow-root (open)
     |- <toolbarbutton id="scrollbutton-up"...></toolbarbutton>
     |- <spacer part="overflow-start-indicator"></spacer>
...
</arrowscrollbox>

I need to start with #tabbrowser-arrowscrollbox:not([scrolledtostart]) as selector to distinguish between scrolledtostart=true/false. Then I need to select the spacer with the overflow-start-indicator part so I can make that look different, depending on the scrolledtostart value. But not even :host(#tabbrowser-arrowscrollbox) * {background:red!important;} or :host(#scrollbutton-up) * {background:red!important;} had any effect, so I'm not sure the :host selector works at all in userChrome.css...

Not sure what you mean by 'more obvious shadow' but the host selector doesn't work in userChrome.css, although your styles can affect elements in shadow trees, none of the part or host syntax works. You could use autoconfig to load an author sheet, in which case the part syntax would work, or you could use the component registrar to modify arrowscrollbox.css in which case the host syntax would work.

However, neither of those are actually necessary for what you're trying to do. Because of the simplicity of the application, there's a little trick here...

#tabbrowser-arrowscrollbox[overflowing][scrolledtostart] {
    --overflow-indicator-shadow-start: 0 0 4px black;
}
#tabbrowser-arrowscrollbox[overflowing][scrolledtoend] {
    --overflow-indicator-shadow-end: 0 0 4px black;
}
spacer[part="overflow-start-indicator"] {
    box-shadow: var(--overflow-indicator-shadow-start, initial);
}
spacer[part="overflow-end-indicator"] {
    box-shadow: var(--overflow-indicator-shadow-end, initial);
}

Since custom properties can be inherited from shadow hosts, you can usually do something simple with just userChrome.css this way. For everything that doesn't fit those first 2 selectors it will just default to nothing. If you need to make more complicated rules then you can try that author sheet loader I linked.

Both very interesting, the userChrome.css code and the links to the author sheet and component registrar, that was very helpful! Thank you very much! In this special case I got another idea when writing the commecnt yesterday and managed to access the spacer by #scrollbutton-up[disabled=<true/false>] + spacer {...}. But that works only for this special dom here, so I will start playing around with your code and figure out what I can all do with this scheme. Thanks again :-)

Yeah that's another crafty workaround. No problem, if you have other questions you can post a discussion or an issue on my github repo and I'll get a notification