Search code examples
csspolymerweb-component

Should I include paper-styles/classes/typography.html to use Polymer's typography classes?

At the moment, in my elements.html I am doing:

<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-styles/classes/typography.html">

Note that I include "classes". This way, in my HTML page (NOT in a component!) I can have:

<paper-material elevation="4">
  <h1 class="paper-font-display1">This is actually rendered</h1>
</paper-material>

Is this a horrible way to go about it? What are the alternatives?

Solution

  • The "classes" variation of Polymer styles uses "/deep/" selectors and as a result you will get a deprecation warning from Chrome. For that reason I recommend that you avoid the "classes" variant. The non-classes variation use css mixins which is the approach that is recommended for Polymer 1.0.

    For example an element definition could do this:

    <link rel="import" href="../bower_components/paper-styles/typography.html">
<dom-module>
  <style include="shared-styles">
    .myCaptionStyle {
      @apply(--paper-font-caption);
      color: var(--secondary-text-color);
    }
  </style>
</dom-module>

    Also, take a look at how shared styles work. You can create a shared css class definition out of Polymer's css components and share that with your own elements rather than, or in addition to, using Polymer's mixin directly. As a reference look at how the Polymer Starter Kit uses shared-styles.