Use <paper-material> element within custom element

Question

I'm playing around with the Polymer Starter kit and am creating a nested custom element. I have an outer element that 'outputs' the inner element multiple times.

My issue is that the inner element (business-card) contains a <paper-material>. This element is not being affected by global styles. I know that Polymer adds a class of scoped-style to the element which ensures it can only affect the local DOM. Removing the scoped-style class in Dev Tools applies global styling.

How do I apply the styles from the standard <paper-element> to my nested element or include those same styles within my custom element.

Edit

It appears the my issue is that the styles within 'app-theme' are not applied to the internal element. I can get the desired outcome if I copy the <paper-element> styles, including media queries, plus follow the answer from @Zikes.

It seems against the modular nature of polymer to duplicate everything from an element when the element is already perfect. Am I missing something?

business-card.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">

<dom-module id="business-card">

  <style>
    :host {
      display: block;
    }
  </style>

  <template>
    <paper-material>
      <content></content>
    </paper-material>
  </template>

</dom-module>

<script>
(function() {
  Polymer({
    is: 'business-card'
  });
})();
</script>

Any help much appreciated

Answer 1

Polymer protects element internals from document styles and vice-versa. This is CSS scoping and it's a prominent feature of Web Components.

It can seem problematic in simple examples, but it's generally very beneficial to component reuse that component styles don't bash each other, and that document styles don't unintentionally foul up a component.

Polymer Starter Kit is not ideally set up for using app-theme.html in other scopes, but one thing you can do is copy the style rules you want to use into a CSS file, and then import that CSS file in your element code as below. The import and styles are used efficiently (e.g., the import is only loaded once, even if you use it in multiple elements).

<dom-module id="business-card">

  <link rel="import" type="css" href="theme-styles.css">

  <style>
    :host {
      display: block;
    }
  </style>

  <template>
    <paper-material>
      <content></content>
    </paper-material>
  </template>

  <script>
    Polymer({
      is: 'business-card'
    });
  </script>

</dom-module>

Live example: http://jsbin.com/hojajo/edit?html,output

Answer 2

If you'd like to apply the paper-material effects to your element directly, you can do so like this:

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/shadow.html">

<dom-module id="business-card">
  <style>
    :host {
      display: block;
      position: relative;
      @apply(--shadow-transition);
    }
    :host([elevation="1"]) {
      @apply(--shadow-elevation-2dp);
    }
    :host([elevation="2"]) {
      @apply(--shadow-elevation-4dp);
    }
    :host([elevation="3"]) {
      @apply(--shadow-elevation-6dp);
    }
    :host([elevation="4"]) {
      @apply(--shadow-elevation-8dp);
    }
    :host([elevation="5"]) {
      @apply(--shadow-elevation-16dp);
    }
  </style>
  <template>
    <content></content>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'business-card',
    properties: {
      /**
       * The z-depth of this element, from 0-5. Setting to 0 will remove the
       * shadow, and each increasing number greater than 0 will be "deeper"
       * than the last.
       *
       * @attribute elevation
       * @type number
       * @default 1
       */
      elevation: {
        type: Number,
        reflectToAttribute: true,
        value: 1
      },
      /**
       * Set this to true to animate the shadow when setting a new
       * `elevation` value.
       *
       * @attribute animated
       * @type boolean
       * @default false
       */
      animated: {
        type: Boolean,
        reflectToAttribute: true,
        value: false
      }
    }
  });
</script>

This is copied from the paper-material code itself: https://github.com/PolymerElements/paper-material/blob/master/paper-material.html