The live samples in some documents seem to be broken

[yin1999]

Summary

Some live samples in "Making decisions in your code — conditionals" seem to be broken.

Check the screenshot section.

URL

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#active_learning_more_color_choices

Reproduction steps

1. navigate to the "Active learning: A simple calendar" section
2. Check the live samples

Expected behavior

The live samples are work well, I've checked the page built by @mdn/[email protected] (run yarn start in mdn/content` folder):

Actual behavior

See the screenshot section.

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Linux

Screenshot

Anything else?

No response

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[fiji-flo]

Thanks for reporting. I didn't expect this worked previously. That's because

<script>
  const script = "<script></script>";
  const h1 = "<h1>H1</h1>";
</script>

will render:

We now do real templating so the js parts ends up in a <script> just before the body ends. Allowing real DOM events.

We need to settle on how we want to deal with this. The easiest way is to escape the script tag like:

<script>
  const script = "<script><"+"/script>";
  const h1 = "<h1>H1</h1>";
</script>

or

<script>
  const script = `<script><${"/"}script>`;
  const h1 = "<h1>H1</h1>";
</script>

https://github.com/mdn/content/blob/main/files/en-us/learn/javascript/building_blocks/conditionals/index.md?plain=1#L610