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
<div style="counter-reset: my-value; "> <!-- want to set value here -->
<p id="para">Some text.</p> <!-- and retrieve result of cascade here -->
</div>
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
<div style="-webkit-locale: 'bar foo'; "> <!-- want to set value here -->
<p id="para">Some text.</p> <!-- and retrieve result of cascade here -->
</div>
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.
