Polymer components' CSS encapsulation is broken when run e.g. in Chrome when compiled by dart2js

[DartBot]

Originally opened as dart-lang/sdk#17676

This issue was originally filed by ant...@mixbook.com

---

What steps will reproduce the problem?

1. Create 2 polymer components, one nested into another, like:

    <polymer-element name="x-parent">
      <template>
        <style>
          .title { color: blue; }
        </style>
        <div class="title">Parent title</div>
        <x-child></x-child>
      </template>
      <script type="application/dart" src="parent.dart"></script>
    </polymer-element>

    <polymer-element name="x-child">
      <template>
        <style>
          .title { background: yellow; }
        </style>
        <div class="title">Child title</div>
      </template>
      <script type="application/dart" src="child.dart"></script>
    </polymer-element>

1. Compile it to JS by 'pub build', run in Chrome

What is the expected output? What do you see instead?

Expected output - "Child title" should be a black text on yellow background
See instead - "Child title" is blue text on yellow background

What version of the product are you using? On what operating system?
Polymer 0.9.5, Dart 1.2.0 Stable, Mac OS X 10.9

Please provide any additional information below.

It works fine in Dartium, because it has the native Shadow DOM support.
But since it is not yet in Chrome, it creates two CSS rules, like:

    x-parent .title { color: blue }
    x-child .title { background: yellow }

and of course x-parent .title also applies to x-child's title, since x-child is inside x-parent.

But that actually breaks the main idea and the main feature of the polymer elements - their styles are not encapsulated.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/8631949?v=3" align="left" width="48" height="48"hspace="10"> Comment by floitschG

---

Added Area-Polymer, Triaged labels.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/1081711?v=3" align="left" width="48" height="48"hspace="10"> Comment by jmesserly

---

Removed Area-Polymer label.
Added Pkg-Polymer, Area-Pkg labels.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

Added this to the 1.6 milestone.
Removed Priority-Unassigned label.
Added Priority-Medium label.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

Removed this from the 1.6 milestone.
Added Polymer-P-1 label.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

Removed Polymer-P-1 label.
Added Polymer-Milestone-Next label.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

Added PolymerMilestone-Next label.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

Removed Polymer-Milestone-Next label.