If the style cell is hidden, the style is not applied. If the cell is shown again, the style works as expected. I don’t think this behavior is intended.
https://observablehq.com/d/273c6535f68e7baf
Hi Nicolas. No, that’s the intended behavior for a hidden cell. A hidden cell suppresses its implicit display, which means that for a Markdown or HTML cell, the resulting DOM content will not be inserted into the DOM.
We currently show <empty> in cells that display nothing, or that only display a style or link element (which are common but zero-height elements). (Note: I just changed the latter to <style> and <link> as appropriate, so if you toggle the hidden flag on the cell you will see it toggle between <empty> and <style> as intended.) In the future, these placeholders will go away in read-only mode and the cell will become completely invisible to the reader, but the content will still be inserted into the DOM. In edit mode (and in read-only mode for now), we need to display something even when a cell doesn’t display anything itself so that you can click on the cell to edit it, select it, etc.
If you want to suppress the <empty> (or <style> etc.), you can wrap the style or link element in a <div> like so:
<div>
<style>
body {
background: cyan;
}
</style>
</div>
Similarly, in your case you can use a Markdown cell to wrap the imported style element in a <p> element:
${style}
Alternatively, you can hide your style or link element in another cell that is already displaying something, such as the first (title) cell in your notebook.
Hidden Markdown and HTML cells aren’t very common, but they can be used to effectively disable a cell temporarily if you don’t want them to display. Also, in the near future, we’ll likely let you set the name (a.k.a. output) of Markdown and HTML cells, as you can currently do in the old editor. This lets you define some chunk of Markdown or HTML content, and then reference this content as a variable in another cell. See this earlier thread for related discussion.
Thanks for the explanation. So this is about the effect on the DOM. I find it a bit counterintuitive. A cell containing CSS that is hidden has no effect on the document, whereas a hidden cell containing a JavaScript variable still exists in the document. The logic is quite different from other notebook environments, where you simply choose for each cell whether the code should be displayed and/or executed. But I understand the logic.
The fact that, in the future, cells will be able to disappear completely in read-only mode is a really great idea 
Right. Hidden doesn’t mean the cell is disabled, it just means the implicit display of the cell is prevented. Thus a Markdown or HTML cell that is hidden will still run, just like a JavaScript cell, but typically this won’t do anything because its resulting content will not be inserted into the DOM. Though as I said, if the Markdown or HTML cell is named (currently only possible using the old editor), you’d be able to reference the generated content from another cell as a variable, again just like a JavaScript cell.
(I’ve been meaning to add a separate disabled flag in the future that prevents a cell from running.)
Having a disabled flag would make it possible to show code without executing it. I often use this feature in R notebooks, and I find it very useful for teaching.
I don’t know if it is easy to implement, especially as new cell inspection will be on its way at some point, but it would be helpful if the empty, link and style labels were only present when the cell is unpinned and unexpanded. As it is we get the extra label, which in the case of style, gives a slightly confusing double label:
Good idea, Jo. I’ve just added that. Thank you!