You can borrow an existing property that takes an arbitrary string for its value. Ones that come to mind are font-family, counter-reset and counter-increment, or animation-name. Using counter-reset you can do things like:
CSS
* {counter-reset: inherit;} /* by default, counter-reset does NOT inherit */
HTML
JS
var p_styles = window.getComputedValue(document.getElementById("para"),null);
var p_reset_value = p_styles.counterReset;
var p_myvalue = p_reset_value.split(" ")[0]; /* computed value will be 'my-value 0' */
The only possible compatibility issue here, in the unlikely event that you are actually using counters in your code, is the unwanted side-effects of the CSS rule. Also, notice that the value must fit the CSS definition of an "identifier". If you give a value with spaces it will be interpreted as two different counters, and if you enclose it in quotes the CSS value will be considered invalid.
Using -webkit-locale
If you're real brave, you could also use -webkit-locale. Since it inherits and takes a single string value, it eliminates the need for much of the above, including the CSS rule and the JS to split apart the computed value, and eliminates the restriction that the value be a CSS "identifer":
HTML
JS
var style = window.getComputedValue(document.getElementById("para"),null);
var prop = style.webkitLocale; // "bar foo"
Hopefully in the near future we will have CSS cascading variables and this hackery will no longer be necessary.
