Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Josh-Cena opened this issue Mar 17, 2025 · 7 comments
Labels
live-samples issues related to live samples (EmbedLiveSample macro) needs info Needs more information to review or act on. needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. p4 Not urgent, only if time allows plus:playground

Comments

@Josh-Cena
Copy link
Member

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

@Josh-Cena Josh-Cena added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Mar 17, 2025
@Josh-Cena Josh-Cena marked this as a duplicate of mdn/content#37268 Mar 17, 2025
@caugner
Copy link
Contributor

caugner commented Mar 17, 2025

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

@caugner
Copy link
Contributor

caugner commented Mar 17, 2025

@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?

@caugner caugner added the needs info Needs more information to review or act on. label Mar 17, 2025
@Josh-Cena
Copy link
Member Author

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
Copy link
Contributor

caugner commented Mar 20, 2025

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
Copy link
Member Author

Josh-Cena commented Mar 20, 2025

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 caugner transferred this issue from mdn/rari Mar 20, 2025
@caugner
Copy link
Contributor

caugner commented Mar 20, 2025

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.

@caugner caugner added p4 Not urgent, only if time allows live-samples issues related to live samples (EmbedLiveSample macro) plus:playground labels Mar 20, 2025
@Josh-Cena
Copy link
Member Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
live-samples issues related to live samples (EmbedLiveSample macro) needs info Needs more information to review or act on. needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. p4 Not urgent, only if time allows plus:playground
Projects
None yet
Development

No branches or pull requests

2 participants