JSFiddle - React, Tailwind, and code Playground

HTML

<div id="someElement"></div>

CSS

#someElement {
    content: '{"foo": "bar"}';
}

JavaScript

var CSSMetaData = function() {
    
    function trimQuotes( str ) {
         return str.replace( /^['"]/, "" ).replace( /['"]$/, "" );   
    }
    
    function fixFirefoxEscape( str ) {
        return str.replace( /\\"/g, '"' );
    }
    
    var forEach = [].forEach,
        div = document.createElement("div"),
        matchesSelector = div.webkitMatchesSelector ||
                          div.mozMatchesSelector ||
                          div.msMatchesSelector ||
                          div.oMatchesSelector ||
                          div.matchesSelector,
        data = {};
    
    forEach.call( document.styleSheets, function( styleSheet ) {
        forEach.call( styleSheet.cssRules, function( rule ) {
            var content = rule.style.getPropertyValue( "content" ),
                obj;

            if( content ) {
                content = trimQuotes(content);
                try {
                   obj = JSON.parse( content );
                }
                catch(e) {
                    try {
                        
                        obj = JSON.parse( fixFirefoxEscape( content ) );
                    }
                    catch(e2) {
                        return ;
                    }

                }
                data[rule.selectorText] = obj;
            }
        });

    });

    
    return {
    
        getDataByElement: function( elem ) {
            var storedData;
            for( var selector in data ) {
                if( matchesSelector.call( elem, selector ) ) {
                    storedData = data[selector];
                    if( storedData ) return storedData;
                    
                }
            }
            
            return null;
        }
    };

}();
var obj = CSSMetaData.getDataByElement( document.getElementById("someElement"));
console.log( obj.foo ); //bar