title: How to style inner elements of custom Polymer element using external styles?
body: <p>Unable to style an element using Shadow DOM with Polymer 1.x or 2.x. Consider the following custom element in Polymer 2.0:</p>
  
  <pre><code>&lt;link rel="import" href="../polymer/polymer.html"&gt;
  
  &lt;!--
  `semantic-ui-button`
  
  
  @demo demo/index.html
  --&gt;
  
  &lt;dom-module id="polymer-button"&gt;
    &lt;template&gt;
      &lt;div class$="button {{size}}"&gt;{{label}}&lt;/div&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      class MyElement extends Polymer.Element {
        static get is() {
          return 'polymer-button';
        }
        static get properties() {
          return {
            label: {
              type: String,
              value: 'polymer-element'
            },
            size: { type: String }
          };
        }
      }
  
      window.customElements.define(MyElement.is, MyElement);
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>in the demo:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"&gt;
  
      &lt;title&gt;polymer-element demo&lt;/title&gt;
  
      &lt;script src="../../webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
  
      &lt;link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"&gt;
      &lt;link rel="import" href="../../iron-demo-helpers/demo-snippet.html"&gt;
      &lt;link rel="import" href="../polymer-element.html"&gt;
  
      &lt;style is="custom-style" include="demo-pages-shared-styles"&gt;&lt;/style&gt;
      &lt;style&gt;
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .button {
          background: #ccc;
          border-radius: 4px;
          color: #444;
        }
        .button.big {
          font-size: 1rem;
          padding: 6px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="vertical-section-container centered"&gt;
        &lt;h3&gt;Basic polymer-element demo&lt;/h3&gt;
        &lt;demo-snippet&gt;
          &lt;template&gt;
            &lt;polymer-button label="Demo"&gt;&lt;/polymer-button&gt;
          &lt;/template&gt;
        &lt;/demo-snippet&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The styles defined in the demo for <code>.button</code> and <code>.button.big</code> are <em>not</em> applied to the shadow element; however, in Polymer 1.x the styles are applied <strong>if</strong> we use ShadyDOM:</p>
  
  <pre><code>&lt;link rel="import" href="../polymer/polymer.html"&gt;
  
  &lt;!--
  `polymer-button`
  
  
  @demo demo/index.html
  --&gt;
  
  &lt;dom-module id="polymer-button"&gt;
    &lt;template&gt;
      &lt;div class$="button {{size}}"&gt;{{label}}&lt;/div&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      Polymer({
  
        is: 'polymer-button',
  
        properties: {
          label: { type: String }
        },
  
      });
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>is there a way to select/style these inner elements using <a href="https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#stylefromoutside" rel="nofollow noreferrer">external styles</a>?</p>
  
  <p>Below is a visual representation of what I said above in order of appearance:</p>
  
  <ol>
  <li>Polymer 1.x using Shadow DOM</li>
  <li>Polymer 1.x using ShadyDOM</li>
  <li>Polymer 2.x</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/5lhm9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5lhm9.png" alt="differences"></a></p>