CSS in interactive examples should be inserted as a separate style from built-in styles

[Josh-Cena]

What information was incorrect, unhelpful, or incomplete?

Please see mdn/content#37268. Currently the interactive example renders the default styles together with the custom styles in one tag, which makes retrieving styles with CSSOM very brittle.

What did you expect to see?

Restore to previous behavior: having two style tags, or as many style tags as there are for CSS blocks

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

[caugner]

mdn/content#37268 refers to a live sample, not an interactive example.

[caugner]

@Josh-Cena Can you please provide complete steps to reproduce (the live sample works for me in Firefox), and more details on expected vs actual behavior?

[Josh-Cena]

Oops, sorry, I meant live examples. And it appears that live examples already work now, but the playground still doesn't. I have checked the other pages fixed up in mdn/content#37285 and it seems that are all fixed.

Maybe the playground error can be fixed too? Maybe we can make sure that the CSS style is always inserted as stylesheets[1] instead of any other index?

[caugner]

Maybe the playground error can be fixed too?

I'm not sure what error you're referring to. Can you please add steps to reproduce to this issue?

This live sample is rendering properly for me, and opening in the Playground works as well.

[Josh-Cena]

This bug is in the context of mdn/content#37268. You are looking at the right example, but after opening it in the playground, you have to click one of the buttons, and you should see the same errors as that issue. The problem is that the #css-output style is inserted as the style sheet index 2, not index 1.

[caugner]

The live example should not rely on the order of stylesheet insertions, because this also means it won't work for folks to copy and paste it elsewhere. So it would be beneficial to generalize it by filtering across all CSS rules from all stylesheets.

When reporting issues, please ensure that you provide clear, step-by-step instructions for reproduction. Referencing another issue, especially one that also lacks concise reproduction steps, offers limited value.

Please note that if this only affects a single live example, and/or can be fixed in the example, we will most likely close this as wontfix.

[Josh-Cena]

Please also check the linked fix in that issue for all such cases: this is a widespread case.

We would not be fixing the content, because we want it to stay trivial. The DOM connector always has to be modified anyway: people don't expect to use the same querySelector or getElementById to get the same behavior. We want to write minimal code to set up the context we want. However, I totally understand if you don't think it's a priority for the playground: as long as the live sample works I don't have much to say.

When reporting issues, please ensure that you provide clear, step-by-step instructions for reproduction. Referencing another issue, especially one that also lacks concise reproduction steps, offers limited value.

Well, that's the reality we work in in content anyway. This is what literally every bug report looks like. The screenshots are IMO illustrative enough.