JSFiddle - React, Tailwind, and code Playground

by gaby de wilde

HTML

<div id="foo" data-bar="ball"></div>

CSS

[data-bar="ball"]{background:red}
[data-bar*="baz"]{background:green}

[data-bar*="baz"]:after{content:attr(data-bar)}

JavaScript

foo.dataset.bar = "this can contain a very long string that will be part of the attribute and color green if baz is present in it.";