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.