JSFiddle - React, Tailwind, and code Playground

CSS

.hl-text.pressed, .hl-text:active:hover {
    background-color:yellow;
}

JavaScript

enyo.kind({
    name: "Highlightable",
    handlers: {
        ondown: "highlight",
        onleave: "unhighlight"
    },
    classes:"hl-text",
    highlight: function(inSender, inEvent) {
        if(enyo.platform.firefoxOS && inEvent.srcEvent.type !== "mousedown") {
            this.addClass("pressed");
        }
    },
    unhighlight: function(inSender, inEvent) {
        if(enyo.platform.firefoxOS && inEvent.srcEvent.type !== "mouseout") {
            this.removeClass("pressed");
        }
    }
});

enyo.kind({
    name: "App",
    classes: "enyo-unselectable",
    components: [
        {kind: "onyx.Toolbar", content:":active:hover Workaround Demo"},
		{style:"margin:25px;", components:[
            //can use inline content in a highlightable
            {kind:"Highlightable", content:"This is a simple example of text that highlights when clicked/tapped on."},
            {tag:"br"},
            //can even use components enclosed within a highlightable
            {kind:"Highlightable", components:[
                {kind: "onyx.Groupbox", components: [
				    {kind: "onyx.GroupboxHeader", content: "Components inside a Highlightable"},
                    {content:"This is what happens when components are within a Highlightable component.", style:"padding:10px;"}
                ]}
            ]}
        ]}
    ]
});

// render two, they're small
new App().renderInto(document.body);