[Lucent]

This proved tricky for me because of Core Web Vitals. I made ptable.com work without JS, but I still show "dead" interactive components (the properties area above) because expanding it when JavaScript arrives would destroy my Cumulative Layout Shift score.

[asddubs]

give everything that is supposed to be js-only a class called js-only (or whatever) and then just do:

<noscript><style>.js-only { display:none !important; }</style></noscript>

this won't work on failed script loads, only on actually disabled javascript, though

[jlokier]

A .no-js class is sometimes handy too, instead of or in addition to .js-only.

I don't like using <noscript> to detect absence of JS, because browsers that are blocking JS (e.g. whitelists), or even blocking some JS and allowing others to load (e.g. inline vs same-domain vs cross-domain vs tracking-blockers), haven't actually disabled JS, and won't necessarily render <noscript> even if the JS won't load.

But there are similar ways to achieve the same thing which don't suffer from this problem. Unfortunately to cover all cases they are complicated, using combinations of inline <style>, <script>, document.write, similar lines in externally loaded scripts which only run if those are loaded, and DOMContentLoaded to do the right thing if a synchronous <script> did not load after all.

Once it's done it works, but it's not trivial to work through all the cases.