Dynamic style element

Developers
#1

I want to add a widget that will rely on styling. Primarily to add all sorts of icons. I want the style to be shared across widget uses (across tiddlers), so should be in the head element (right?) but, I want it there only when the widget is used. That is, at least one tiddler that contains the widget is open. When no such tiddler is open, I don’t want the style to be part of the DOM, to conserve memory

Is there a way to achieve that? Seems like it requires some sort of reference count of widget instances.

#2

Can’t you give the root element of your widget output a unique class and simply include that in the styles?

That is

<!-- This node is what's generated by my widget -->
<div class="my-widget-custom-classname">
  <!--- ... -->
   <button class="something"><!-- ... --></button>
</div>

.my-widget-custom-classname {
  button.something {/* Icons and such go here */}
}

Or if the required styling takes place outside that widget node, you can use the :has pseudo-selector, with something like this:

.tc-tiddler-body:has(.my-widget-custom-classname) {
  /* Rules for the tiddler body */
}
.tc-tiddler-frame:has(.my-widget-custom-classname) {
  /* Rules for the tiddler body and controls/title, etc.*/
}
.tc-tiddler-story-river:has(.my-widget-custom-classname) {
  /* Rules for all open tiddlers */
}
.tc-body:has(.my-widget-custom-classname) {
  /* Rules for the entire page */
}
1 Like
#3

I don’t want to always include the style in the DOM. I’ll see if I can make the post clearer