Styles not work system tiddlers

#1

The following code is used to dynamically switch styles. The code imitates the full-screen style of codemirror6. It seems to work normally, but I accidentally discovered that the style does not work for system tiddlers and cannot be scrolled in full-screen state. Even if I force overflow: auto to scroll, it will not work. Does anyone know the reason?

title: $:/plugins/oeyoews/tiddler-fullscreen/styles.css
tags: $:/tags/Stylesheet

\define fullscreen-tiddler()
.tc-tiddler-frame[data-tiddler-title="$(cssEscapedTitle)$"] {
	overflow: auto;
}

\end

<$list filter="[prefix[$:/state/tiddler-fullscreen/]] :filter[get[text]match[yes]] +[limit[1]]" variable="fullscreenStateTiddler">

<$let fullscreenTiddler={{{ [<fullscreenStateTiddler>removeprefix[$:/state/tiddler-fullscreen/]] }}} cssEscapedTitle={{{ [<fullscreenTiddler>] }}}>

<% if [<fullscreenTiddler>!is[missing]] %>
<<fullscreen-tiddler>>
<% endif %>

</$let>

</$list>

But if you write the style directly, it will work normally, such as the following.

.tc-tiddler-frame[data-tiddler-title="$:/ControlPanel"] {
	overflow: auto;
}
#2

Since I haven’t found the reason yet, I used a simpler style instead, and it worked fine.

<$list filter="[{$:/state/tiddler-fullscreen/fullscreen}match[yes]]">
.tc-tiddler-frame[data-tiddler-title] {
	overflow: auto;
}
</$list>
#3

Hi @oeyoews in CSS selector values we have to explicitly escape the values to avoid special characters. TiddlyWiki provides the “escapecss” operator for the purpose, so you should be able to do something like:

cssEscapedTitle={{{ [<fullscreenTiddler>escapecss[]] }}}
#4

I did suspect that it was a problem with escapescss before, so I tried to remove it, but it still didn’t work, which was strange.