Polymer @Import Theme File with :Host in Styles Has No Affect

Polymer @import theme file with :host in styles has no affect

There's a new concept called style module (actually a dom-module element behind the scene) introduced in Polymer 1.1 (read it here) and the old way of including external stylesheets has been deprecated (read it here).

Basically, you need to create an html file like how you normally create an element to store your styles. The id defines the name of this file that will be referenced later on.

<!-- shared-styles.html -->
<dom-module id="shared-styles">
  <template>
    <style>
      .red { color: red; }
    </style> 
  </template>
</dom-module>

Then obviously you need to import this file in your page.

<link rel="import" href="shared-styles.html">

Now, there are two scenarios.

If you are using custom-style at the document level, you need to
include the style module you previously defined like this -
<style is="custom-style" include="shared-styles"></style>
If you simply want to include the style module inside one of your
elements, do this -
<dom-module id="my-element"> <style include="shared-styles"></style>

Have a look at this plunker that demonstrates both scenarios.

Keep in mind that in your particular example, since you are using :host, I assume you will go with scenario 2. So this plunker should be a bit more clearer.

How can an external stylesheet be used to style Polymer 1.0 elements?

You can load the HTML file containing your custom-style like you would with a polymer element:

<link rel="import" href="my-custom-style.html">

And your my-custom-style.html file would contain:

<style is="custom-style">
    paper-toolbar {
        --paper-toolbar-color: blue;
    }
</style>

As of Polymer 1.1, this feature is now deprecated. See here for an update answer

Polymer Iron Flex Mixin's Don't Work, But Classes Do

I kept digging and I found an answer. I also found out that the method has been deprecated. My pubspec defines these versions:

polymer: ^1.0.0-rc.17
polymer_elements: ^1.0.0-rc.8

I'm pretty sure the solution was to add this line of code to my index.html:

<link rel="import" href="packages/polymer/polymer.html">

The reason I'm not positive that this is the only requirement is that I've been changing a lot things to get it to work. This is my complete index.html:

<!DOCTYPE html>
<html>
<head>
<title>Jazz Cat</title>
<script>
  window.Polymer = window.Polymer || {};
  window.Polymer.dom = 'shadow';
</script>

<!-- For testing using pub serve directly use: -->
<base href="/">
<!-- For testing in WebStorm use: -->
<!-- <base href="/dart/web/"> -->

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/polymer_elements/iron_flex_layout.html">
<link href="master.css" rel="stylesheet" type="text/css" />
<style is="custom-style">
  .container {
    @apply(--layout-horizontal);
  }
  .element-index {
    @apply(--layout-flex-3);
  }
  .element-body {
    @apply(--layout-flex-9);
  }
  .element-main {
    @apply(--layout-flex-7);
  }
  .element-sidebar {
    @apply(--layout-flex-2);
  }
</style>
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
</head>
<my-app>Loading...</my-app>
</html>

Now that I got to work, I'll move my styling to a separate file. This is one of the files where I use the mixin classes:

<section class="container">
<section class="element-index">
<h1>{{title}}</h1>
  <paper-listbox class="scroll-list" (click)="onScroll()">
    <paper-item class="item-height" *ngFor="let artist of artists" [class.selected]="artist == selectedArtist" (click)="onSelect(artist)">
      {{artist.first_name}} {{artist.last_name}}
    </paper-item>
  </paper-listbox>
<paper-button (click)="gotoDetail()">Detail</paper-button>
<!--<paper-icon-button icon="refresh" (click)="gotoDetail()"></paper-icon-button>-->
  <!--<button (click)="gotoDetail()">View Details</button>-->
</section>
<section class="element-body">
<div *ngIf="selectedArtist != null">
  <h2>{{selectedArtist.first_name}} {{selectedArtist.last_name}}</h2>
  <!--<section class="layout horizontal">-->
  <section class="container">
    <section class="element-main">
      <!--<dl class="justified">
        <dt>Instrument:</dt><dd>{{ selectedArtist.primary_instrument }} </dd>
        <dt>Other:</dt><dd>{{ selectedArtist.other_instruments }}</dd>
        <dt>Birth:</dt><dd>{{ selectedArtist.birth_year }}</dd>
        <dt>Death:</dt><dd>{{ selectedArtist.death_year }}</dd>
      </dl>-->
      <h3>Notes</h3>
      <p>{{ selectedArtist.notes }}</p>
      <h3>Recordings</h3>
      <table class="index">
        <th>Date</th>
        <th>Title</th>
        <th>Leader</th>
        <tr *ngFor="let credit of artist_credits" >
          <td class="tableDate">{{ credit.recording_date | date:'d MMM yyyy' }}</td>
          <td>{{ credit.title }}</td>
          <td>{{ credit.first_name }} {{ credit.last_name}}</td>
        </tr>
      </table>
    </section>
    <section class="element-sidebar">
      <dl class="narrow-list">
        <dt>Instrument</dt><dd>{{ selectedArtist.primary_instrument }} </dd>
        <dt>Other</dt><dd>{{ selectedArtist.other_instruments }}</dd>
        <dt>Birth</dt><dd>{{ selectedArtist.birth_year }}</dd>
        <dt>Death</dt><dd>{{ selectedArtist.death_year }}</dd>
      </dl>
    </section>
  </section>
</div>
</section>
</section>

Based on the answer to this question, a new method has been created for polymer 1.1 and this one has been deprecated.

Polymer @Import Theme File with :Host in Styles Has No Affect