Use the <paper-material> element inside a custom element

Question

I play with the Polymer Starter Kit and create a nested custom element. I have an external element that "displays" the internal element several times.

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

How to apply styles from the standard <paper-element> to my nested element or include the same styles in my custom element.

Edit

It seems like my problem is that the styles inside the theme app do not apply to the inner element. I can get the desired result if I copy the <paper-element> styles, including media queries, and follow the answers from @Zikes.

Apparently, the modular nature of the polymer duplicates everything from the element when the element is already perfect. Did I miss 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 is much appreciated

Answer 1

The polymer protects the internal elements of elements from document styles and vice versa. This is the definition of CSS, and it is an important feature of web components.

This may seem problematic in simple examples, but as a rule, reusing components is very useful, that component styles are not bash of each other, and that document styles do not inadvertently fill the component.

The Polymer Starter Kit is not ideally configured to use app-theme.html in other areas, but one thing you can do is copy the style rules that you want to use in the CSS file, and then import this CSS file into the element code as shown below. Import and styles are used efficiently (for example, import is loaded only 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> 

Real-time example: http://jsbin.com/hojajo/edit?html,output

Answer 2

If you want to apply paper-material effects to your element directly, you can do this as follows:

 <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