[Bug?]: <noscript> content renders on the client

GiyoMoon commented 1 month ago

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Current behavior 😯

SolidJS renders the content of <noscript> tags on the client. This results into unwanted behavior like styles defined inside <noscript> tags being applied, even if scripting is turned on in the browser.

Expected behavior 🤔

SolidJS should (probably?) only render the content of <noscript> tags on the server and omit it's content when rendered on the client.

I've looked at React to have something comparable and they seem to do exactly this. I found a related pr.

Steps to reproduce 🕹

https://playground.solidjs.com/anonymous/0a47d0fd-aef4-403c-9f4d-0ceb2821199b

🚨 Make sure to open this playground with a chromium or webkit based browser, on gecko (firefox), this seems to work as intended.

The <h1> element gets the styles that are contained inside <noscript> applied, but this shouldn't happen because our browser has scripting turned on and should ignore <noscript> tags.

Context 🔦

While this seems like a non issue in client side only solid apps, this is a problem in apps that render both on the server and on the client.

Your environment 🌎

No response

GiyoMoon commented 1 month ago

A fix in the meantime is to wrap <noscript> inside a <Show> like this:

import { Show } from 'solid-js'
import { isServer } from 'solid-js/web'

<Show when={isServer}>
  <noscript>
    ...
  </noscript>
</Show>

ryansolid commented 1 month ago

Understanding this issue.. we never want noscript content to render on the client. And we should expect that it isn't interopolatable.. Like people wouldn't be able to put content in it, expressions or whatnot?

You are right that the client will skip over it if it gets undefined. So that can work for now.. But this sounds like compiler fix.

GiyoMoon commented 1 month ago

I'm not an expert on this but I do argue that we can ignore everything inside a <noscript> tag on the client. Because at that point we're running javascript which means scripting is enabled and <noscript> tags are ignored anyway. Pretty sure React does exactly this too. MDN lists the permitted content of a <noscript> element here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript#technical_summary Not sure if that's important for Solid.

solidjs / solid