Add custom HTML attribute alongside the CSS variable

[hyvyys]

CSS variables are one great way to style and animate split text, but it is difficult to use selectors like :nth-child because the plugin always splits words even when I use data-splitting="chars" and additionally the obnoxious whitespace nodes are inserted.

Adding a data attribute would allow to overcome this, e.g. instead of just this:

<span class="char" data-char="V" style="--char-index:12;">V</span>

we would have this

<span class="char" data-char="V" style="--char-index:12;" data-char-index="12">V</span>

This would allow for rules like below:

[data-char-index="12"] {
  //...
}