JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test" foo="bar">
    a
</div>
<button id=b type=button>b</button>
<button id=c type=button>c</button>
<button id=boo>update</button>

CSS

#test[boo="bar"] {
    background-color: yellow;
}
#test[boo="foo"] {
    background-color: red;
}

#test {
    height: 100px;
    width: 100px;
}

JavaScript

var testee = document.getElementById('test');

$('#b').click(function(){
    testee.setAttribute('boo', 'bar');
});

$('#c').click(function(){
    testee.setAttribute('boo', 'foo');
});

$('#boo').click(function(){
    $(testee).hide().show();
    $('body').append('<p>now foo is ' + testee.getAttribute('boo') + '</p>');
});