HTML's hidden realtime CSS editor

Credit goes to

If you prefer seeing it and the code in action, check out the codepen

For everyone who can not watch the video or play with the codepen right now.

Start by creating the following markup

<style>
  html {
    background: blue;
  }
</style>

Since <style> is just another HTML tag, it follows the same rules as other HTML tags. If you check the CSS rules in the devtools you will see that display: none gets applied to the style tag. Sooo, let's override it.

<style style="display: block;">
  html {
    background: blue;
  }
</style>

Sweet, we can now see the contents of the style tag on the page!

Finally let's try adding the contenteditable attribute to it.

<style style="display: block;" contenteditable>
  html {
    background: blue;
  }
</style>

This will let us type in the style field.
And here comes the twist: The styles get re-evaluated while you type!

In the result, try changing background: blue; to background: green; and see what happens.

After I saw this, I immediately thought "So what about the script tag?".

Everything works the same except that the script unfortunately does not get re-evaluated when you change the content.

Conclusion

There is probably no use case for this, but it is still fun to explore these kinds of things.