html - When should <script> tags be visible and why can they?

Question

A script element that got styled as display:block appears visible. Why is it possible and is there any real use case where it is desired?

td > * {
  display: block;
}

<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>

Answer 1

The HTML5 specification defines a style sheet that user agents (like browsers) are expected to use. Section 10.3.1 lists the styles for "Hidden elements":

@namespace url(http://www.w3.org/1999/xhtml);

[hidden], area, base, basefont, datalist, head, link,
meta, noembed, noframes, param, rp, script, source, style, template, track, title {
  display: none;
}

embed[hidden] { display: inline; height: 0; width: 0; }

As you can see, it applies display: none; to script.

This is the only "barrier" between your users and hidden script elements. It’s perfectly fine and intended to be able to overwrite styles from user-agent style sheets within author style sheets (and of course also within user style sheets).

Why someone might want to use it? One use case is displaying content without having to escape characters like </>, similar to the old xmp element. The script element can be used not only for scripts, but also for data blocks (i.e., for anything with a MIME type).