title: Dynamically appended child has CSS ignored
body: <p>I have seen this question asked here, as well as on Polymer's GitHub, none of the answers works for me.</p>
  
  <p>Plunker: <a href="http://plnkr.co/edit/1tGHXTsFlXeNnq3hCb0P?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/1tGHXTsFlXeNnq3hCb0P?p=preview</a></p>
  
  <p>Index.html has app-element in body.</p>
  
  <pre><code>&lt;head&gt;
    &lt;script src="https://polygit2.appspot.com/components/webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
    &lt;link rel="import" href="app.html"&gt;
    &lt;link rel="import" href="bootstrap.html"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;app-element&gt;&lt;/app-element&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>app.html:</p>
  
  <pre><code>&lt;link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="page-one.html"&gt;
  &lt;dom-module id="app-element"&gt;
  
    &lt;template&gt;
      &lt;style&gt;
  
      &lt;/style&gt;
      &lt;div id="container"&gt;
  
      &lt;/div&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      Polymer({
        is: "app-element",
        ready: function() {
          window.app = this;
        }
      });
    &lt;/script&gt;
  
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>Index.html links bootstrap.html where page-one is declared.</p>
  
  <pre><code>&lt;link rel="import" href="page-one.html"&gt;
  &lt;page-one&gt;&lt;/page-one&gt;
  </code></pre>
  
  <p>page-one has page-base element with two content items added. Second item has class='foo' which should render red background, but it doesn't.</p>
  
  <pre><code>&lt;link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="page-base.html"&gt;
  &lt;dom-module id="page-one"&gt;
  
    &lt;template&gt;
      &lt;!-- scoped CSS for this element --&gt;
      &lt;style&gt;
        .foo {
          background-color: red;
        }
      &lt;/style&gt;
      &lt;div&gt;
        &lt;page-base&gt;
          &lt;div&gt;One&lt;/div&gt;
          &lt;div class="foo"&gt;Two&lt;/div&gt;
        &lt;/page-base&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      Polymer({
        is: "page-one",
      });
    &lt;/script&gt;
  
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>page-base adds itself to app-element after 'WebComponentsReady'.</p>
  
  <pre><code>&lt;link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html"&gt;
  &lt;dom-module id="page-base"&gt;
  
    &lt;template&gt;
      &lt;!-- scoped CSS for this element --&gt;
      &lt;style&gt;
  
      &lt;/style&gt;
      &lt;div&gt;
        &lt;content&gt;&lt;/content&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      Polymer({
            is: "page-base",
            created: function() {
              var self = this;
              window.addEventListener('WebComponentsReady', function() {
                  Polymer.dom(window.app.$.container).appendChild(self);
                  Polymer.dom.flush();
                });
              }
            });
    &lt;/script&gt;
  
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>When page-one is added to app-element declaratively everything works fine.</p>
  
  <p>Also, if I move .foo{} to app-element's style it works even when page is added programatically.</p>
  
  <p>Does anyone know what's going on?
  Thanks.</p>