unicode escape sequences in css not handled correctly

[HaykoKoryun]

consider the following Polymer element:

<dom-module id="model-viewer">
  <style>
    /* represents ':host 3d-model' */
    :host .\33 d-model
    {
      border: solid 1px #000;
      width: 100px;
      height: 100px;
    }
  </style>
  <template>
    <canvas id="3d-model"></canvas>
  </template>
  <script>
    var Viewer = Polymer
    ({
      is: 'model-viewer',
      factoryImpl: function(name)
      {
      },
      ready: function(){},
      attached: function(){},
      detached: function(){}
    });
  </script>
</dom-module>

When Polymer parses the element declaration, specifically the style, it incorrectly treats the space in this sequence \33 d-model as a real space, when in fact it terminates the unicode escape sequence \33. As a result it transforms the selector to: model-viewer .\33.model-viewer d-model.model-viewer instead of model-viewer .\33 d-model.model-viewer as expected.

[arthurevans]

Verified, this works correctly in native shadow DOM but fails in shady as described.

As a workaround, you can left-pad the hexadecimal number to 6 digits, so the following selector works in both shadow DOM and shady:

#\000033d-model

Assigning to @sorvell for triage.

[nazar-pc]

I suspect we'll need just correct some regular expression.
I'll take a look at this.

[nazar-pc]

@HaykoKoryun, fix for this issue is available in PR #2664