Passing HTML data attributes

[lief-erickson]

Looking for some guidance about best practices.

Within the context of this plugin or any of its related plugins, is there a general mechanism to pass data-attributes, perhaps through @otherprops, similar to what is done with parallax or from the dita-bootstrap.extension plugin?

This is the target HTML we're attempting to get:

<span data-fancy-text='{ "effect": "slide", "direction": "right", "color": "#ffe400", 
"speed": 100, "string": ["some", "fancy", "text"], "duration": 2500 }'>some fancy text</span>

and

<div data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, 
"delay": 0, "staggervalue":200, "easing": "easeOutQuad" }'>
:
:
</div>

Notice that the @data-* values are JSON, which is not possible to put into @otherprops. Instead of @otherprops, what if <data> was used?

<ph otherprops="data-fancy-text">
     <data>'{ "effect": "slide", "direction": "right", "color": "#ffe400", 
     "speed": 100, "string": ["some", "fancy", "text"], "duration": 2500 }'</data>
      some fancy text</ph>

<div otherprops="data-anime">
     <data>'{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, 
      "delay": 0, "staggervalue":200, "easing": "easeOutQuad" }'</data>
:
:
</div>

Aside: @otherprops is not allowed on <title>.