Closed Bug 1576229 Opened 5 months ago Closed 5 months ago

Dynamic changes due to rules in user sheets don't get applied in Shadow DOM


(Core :: CSS Parsing and Computation, defect, P3)

70 Branch



Tracking Status
firefox70 --- fixed


(Reporter: omdn, Assigned: emilio)


(Blocks 1 open bug)



(2 files)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.42 Safari/537.36

Steps to reproduce:

Using the add-on attached to this issue, I'm attempting to style Shadow DOM contents with CSS inserted by the add-on (with a cssOrigin of user). The styles are applied on initial load as expected, but aren't being applied when the Shadow DOM content changes.


  1. Load the attached add-on into Firefox.
  2. Navigate to any web page. A red box should appear in the top left corner.
  3. Click the "Toggle blue background" button.

Actual results:

The box's background color doesn't change even though its class changes to "blue" and CSS to change the background color has been inserted by the add-on.

Expected results:

The box's background color should have changed from red to blue as defined by the "blue" class being toggled and the associated CSS inserted by the add-on.

I have tested the attached add-on in Chrome and Opera and the background changes to blue as expected when clicking the "Toggle blue background" button.

Component: Untriaged → DOM: Core & HTML
Product: Firefox → Core

What does the spec require?

Flags: needinfo?(annevk)

I haven't looked at the add-on, but if we don't take dynamic changes into account that seems like a bug. Per the specification add-ons are kinda out-of-scope.

Component: DOM: Core & HTML → Layout
Flags: needinfo?(annevk) → needinfo?(emilio)

So this is because it's a user stylesheet... It's not 100% clear to me how Shadow DOM and user sheets interact, but right now we're handling it inconsistently.

I've attached an automated test that reproduces the issue, though I haven't investigated the root cause of the bug yet.

Assignee: nobody → emilio
Blocks: shadowdom
Ever confirmed: true
Summary: CSS inserted by add-on does not apply to DOM changes within Shadow DOM → Dynamic changes due to rules in user sheets don't get applied in Shadow DOM
Component: Layout → CSS Parsing and Computation
Flags: needinfo?(emilio)
Priority: -- → P3

(Didn't mean to cancel ni?)

Flags: needinfo?(emilio)

Ok, back now, the bug was so silly that it's embarrassing, whoops :)

Flags: needinfo?(emilio)
Attachment #9089091 - Attachment description: Bug 1576229 - (failing) Automated test for dynamic changes in user sheets in Shadow DOM. → Bug 1576229 - Account for user stylesheets for Shadow DOM invalidation.
Pushed by
Account for user stylesheets for Shadow DOM invalidation. r=jwatt
Closed: 5 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla70
You need to log in before you can comment on or make changes to this bug.