title: Best way to deal with polymer element inheritance
body: <p>Given an element like:</p>
  
  <pre><code>&lt;polymer-element name="custom-element"&gt;
      &lt;template&gt;
          &lt;style&gt;
              #container {
                  color: red;
              }
          &lt;/style&gt;
          &lt;div id="container" on-click="{{clickContainer}}"&gt;
              ... lots of other stuff here ...
          &lt;/div&gt;
      &lt;/template&gt;
      &lt;script&gt;
          Polymer('custom-element', {
              clickContainer: function() {
  
              }
          });
      &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>I'd like to have another element that wraps the first:    </p>
  
  <pre><code>&lt;polymer-element name="my-custom-element" extends="custom-element"&gt;
      &lt;!-- extra styling --&gt;
      &lt;script&gt;
          Polymer('my-custom-element', {
              clickContainer: function() {
                  this.super();
              }
          });
      &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>My problems:</p>
  
  <ul>
  <li>What's the best way to specify additional styling ?</li>
  <li>Can I wrap the base element in additional markup (like another container) ?</li>
  <li>Can I select elements from the base element ? Something like <code>&lt;content select=".stuff"&gt;</code> but for the base's shadow markup.</li>
  </ul>