How to Add HTML Attribute to TW Widgets

#1

For example from

<$button class="btn" data-bs-ride="carousel">

I like to produce

<button class="btn" data-bs-ride="carousel">

But this does not work! Is there any other way to pass tag attribute to TW button?

#3

Currently not possible. While there has been a fair bit of discussion around this, the implementation is quite tricky due to the need for maintaining backwards compatibility with the DOM attributes that are supported by some widget, as well as the number of widgets that would need updating.

See for example this PR which stalled due to these reasons: feat: support arbitrary DOM attributes on DOM nodes generated by widgets by saqimtiaz · Pull Request #6823 · Jermolene/TiddlyWiki5 · GitHub

2 Likes
#4

I think you’d have to hack the widget. Does data-bs-ride have to be on the button tag itself?

With the widget maker in 5.3, then maybe you wrap them so that

<$button-m class="btn" data-bs-ride="carousel">

becomes

<$button tag="div" >
<button class="btn" data-bs-ride="carousel">Stuff
</button>
</$button>

Which would render as

<div>
<button class="btn" data-bs-ride="carousel">Stuff
</button>
</div>

And maybe still work? Maybe? Time will tell.

#5

@Mohammad

Add HTML Attribute to TW Widgets

Is very general in nature. I suppose you mean “arbitrary attributes” like your example “data-bs-ride”?

  • Many widgets allow class and style and some the allow the html tag to be set which can be enough to get the specify.
    • Eg have a class “bs-ride-carousel” that delivers the CSS you want. A compound name, rather than attribute/value pair.

Wrapping wikitext and widgets in sections/span or div etc… and applying the arbitrary attribute there or relying on inheritance can work.

  • using selectors in CSS rather than taking the attribute/value route
  • You may want to look at html result or use inspect to find the selectors

Like in marks example above you are using the $button widget as the onclick process and using arbitrary html and attributes within it. Allowing the arbitrary attribute to be used inside the html button.

I suppose my point is HTML can be freely used which means “arbitrary attributes” like your example “data-bs-ride”, can be applied to html and thus, if practical, to what you are trying to achieve, you can wrap widgets in html to have that attribute apply to the content.

I am no expert here, but I do feel we could on particular widgets pass through keyword/value pairs who’s keyword is not reserved by the widget as a parameter, however they need to apply to a particular html element within the rendered html, like in the examples of <$button data-bs-ride="carousel"> widgets to the <button data-bs-ride="carousel">.

  • I expect with Parametrised transclusions, as foreshadowed you may be able to redefine a core widget to include other parameters.

Also remember from 5.2.2 we can do this <div style.color={{!!color}}>Hello</div>

#6

Thank you all.

The reason for this OP is, the modern CSS works with html attributes and now you can have much simpler and understandable code to style elements. Note that CSS now has pseudo class selectors like :has, :is, :not, …

I can target an element like .tc-btn-invisible [data-bs-ride] { ... no need to define extra classes