Accessing style-mod generated stylesheet inside Shadow DOM #15

New issue

Closed

opened 2025-08-28 06:50:49 +02:00 by ammarsa-4693 · 3 comments

ammarsa-4693 commented

2025-08-28 06:50:49 +02:00

(Migrated from github.com)

I’m using style-mod inside a shadow root. The styles apply fine, but the generated stylesheet isn’t available in shadowRoot.styleSheets or shadowRoot.adoptedStyleSheets.
Where does style-mod keep the constructed stylesheet in this case, and is there a supported way to get a reference to it?

I’m using style-mod inside a shadow root. The styles apply fine, but the generated stylesheet isn’t available in shadowRoot.styleSheets or shadowRoot.adoptedStyleSheets. Where does style-mod keep the constructed stylesheet in this case, and is there a supported way to get a reference to it?

marijnh commented

2025-08-29 13:17:04 +02:00

(Migrated from github.com)

The sheet should be in adoptedStyleSheets. What made you conclude it isn't?

The sheet should be in `adoptedStyleSheets`. What made you conclude it isn't?

ammarsa-4693 commented

2025-08-29 13:23:10 +02:00

(Migrated from github.com)

The sheet should be in adoptedStyleSheets. What made you conclude it isn't?

When I tried getting root.adoptedStyleSheets, the array is empty.

> The sheet should be in `adoptedStyleSheets`. What made you conclude it isn't? When I tried getting root.adoptedStyleSheets, the array is empty.

marijnh commented

2025-08-29 15:31:04 +02:00

(Migrated from github.com)

This script logs a one-element array for me:

import {StyleModule} from "style-mod"
let d = document.createElement("div")
let r = d.attachShadow({mode: "open"})
let m = new StyleModule({
  ".foo": {color: "red"}
})
StyleModule.mount(r, m)
console.log(r.adoptedStyleSheets)

This script logs a one-element array for me: ```javascript import {StyleModule} from "style-mod" let d = document.createElement("div") let r = d.attachShadow({mode: "open"}) let m = new StyleModule({ ".foo": {color: "red"} }) StyleModule.mount(r, m) console.log(r.adoptedStyleSheets) ```

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

marijn/style-mod#15

No description provided.

Rows
Columns