custom-style containing '/deep/' or '::shadow' produces an SyntaxError in Firefox

[urandom]

The problem occurs when the rule is passed to the Element.prototype.matches function.
Firefox throws the following:

SyntaxError: An invalid or illegal string was specified

The location of the error is in Polymer.StyleProperties.propertyDataFromStyles, when the matchesSelector is called on the rule. The rule with which I reproduce it is 'body /deep/ *', but any rule which contains /deep/ and ::shadow will trigger the error.

Before the custom-style element, the html contains both the script for webcomponents-lite.min.js, as well as the import for polymer.html.

[urandom]

Some additions:

1. The rules must have custom properties, or the previous check (propertyInfo.properties) in the if will return false and the error won't be triggered
2. The problem also occurs in polymer 1.1. In it, rule.transformedSelector is undefined

[sorvell]

Repro: http://jsbin.com/ximoxo/edit?html,output

[sorvell]

We're going to fix this to avoid the exception, however, using /deep/ to define custom properties is not something the custom property shim has good support for. Only elements in the document scope (not shady or shadow-roots) will get the custom properties.

This is due to how Polymer's custom property shim is designed to work and is not likely to change. Instead, a property value is intended to inherit down the dom tree.

[sorvell]

A selector like body /deep/ * should just be replaced with :root. I will effectively do the same thing.