[css-conditional-3] Stylesheet attached to a document isn't a well-defined concept right now.

[svgeesus]

ISSUE: Stylesheet attached to a document isn't a well-defined concept right now.

Originally posted by @fantasai in #4240 (comment)

[cdoublev]

Copy-paste of #10921 (closed because it is presumably a duplicate of this issue):

CSSMediaRule.matches must return "true if the rule is in an stylesheet attached to a document [...]" but non-constructed stylesheets are not attached to a document.

• constructor document

  Specified when created. The Document a constructed stylesheet is associated with. Null by default. Only non-null for stylesheets that have constructed flag set.

What is the reason (if any) to expect false for CSSMediaRule.matches when accessed via document.styleSheets?

Reading #4240, it seems unintentional.

I guess there might be a difference between associated and attached to a document.

[svgeesus]

@fantasai since your comment triggered the opening of this issue, could you explain further and also comment on the point made by @cdoublev ?

[cdoublev]

In hindsight, I am pretty sure a style sheet is attached to a document if it is included in document.styleSheets or document.adoptedStyleSheets, ie. if it is a non-constructed style sheet (<link>, <style>), or a constructed style sheet included in document.adoptedStyleSheets.

const sheet = new CSSStylesheet
sheet.insertRule('@media all {}')
const rule = sheet.cssRules[0]
rule.matches // false (even if its parent style sheet is "associated" to the document)
document.adoptedStyleSheets.push(sheet)
rule.matches // true

So a style sheet attached to the document is a style sheet included in the document or shadow root CSS style sheets. I do not know what is the difference with the final CSS style sheets.

Also tagging @SebastianZ, which said:

If it's attached to a document, it is always evaluated against that document, even when accessed from another document.