Illustrate style encapsulation in the Shadow DOM // source http://jsbin.com/cequn/2

index.html

<meta name="description" content="Illustrate style encapsulation in the Shadow DOM" />
<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>

<style>
  
  div {
    color: red !important;
  }
</style>

<div>div (main page): I should be red</div>

<polymer-element name="my-element" noscript>
  <template>
    <style>
      div {
        color: hotpink;
      }
      polyfill-next-selector {content: 'p'}
      ::content p {
        color: blue;
      }
    </style>
    <div>div (shadow dom): I should be pink</div>
    <p>p (shadow dom): I should be black</p>
    <content></content>
  </template>
</polymer-element>

<my-element>
  <p>p (distributed node -rendered with template): I should be blue</p>
</my-element>
<div>div (main page): Guyyzz!! im still red</div>
<p>p (main page) unstyled but awesome</p>