I found I wanted the effect of <style scoped>
in my tiddlers but since that is not available in most browsers I found an alternative. With the modern support of nested CSS and the idea that TW adds a data-tiddler-title
attribute to all tiddlers, we can have our cake and eat it to:
<style>
[data-tiddler-title="<<currentTiddler>>"] {
/* Put all your scoped CSS here */
}
</style>
An example:
<style>
[data-tiddler-title="<<currentTiddler>>"] {
.long-list {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(10, 1fr);
}
}
</style>
@@.long-list
<<list-links "[tag[Jounal]nsort[created]]">>
@@
I thought others might find that pretty cool.