Issue with upgrade to Polymer 0.5.1 and styling paper-dialog

Question

So I just updated my project from Polymer v0.4.2 to v0.5.1 of the Polymer library. One thing that seemed to have changed is how the paper-dialog element is implemented.

In v0.4.2, when I had a paper-dialog inside of my custom element, I could customize it with CSS inside of my element using core-style elements.

In v0.5.1, if I understand correctly, the paper-dialog is no longer implemented inside my component, but instead it's implemented in the core-overlay-layer element which is in the html page outside of my component.

So does that mean that I now have to add a CSS style sheet to the html page that contains my component? If so, then I can no longer use core-style along with the benefits of the CoreStyle.g object. It also means that everything related to my component is no long all encapsulated inside of my component.

Please tell me that I am wrong and that there is a way for me to style the paper-dialog from within my component still.

Thanks!

Yvonne Yip Yvonne Yip · Accepted Answer · 2014-11-16T07:02:31

In Polymer 0.5.1 the layered property (doc: https://www.polymer-project.org/docs/elements/core-elements.html#core-overlay) defaults to true which allows it to always display above page content. If layered is false, the dialog may not display on top if there is something after it in DOM with a higher stacking context.

However because layered reparents the dialog to a global core-overlay-layer it's not possible to style it from an outer scope. There are a couple options for styling:

If you know you don't have any DOM with a higher stacking context than the dialog, set layered="false" to get the non-layered behavior and you can style it from the outer scope.
Style the dialog with a /deep/ rule in a global style. You can still use core-style by referencing the style in the global scope. You can also include it in the same file as your element definition, e.g.

<core-style id="x-dialog">
  html /deep/ #dialog {
    color: red;
  }
</core-style>
<core-style ref="x-dialog"></core-style>
<polymer-element name="my-element" noscript>
<template>
  <paper-dialog id="dialog"></paper-dialog>
</template>
</polymer-element>

Extend paper-dialog and style the new element:

<polymer-element name="my-paper-dialog" extends="paper-dialog" noscript>
<template>
  <!-- or use core-style -->
  <style>
    :host {
      color: red;
    }
  </style>
</template>
</polymer-element>

Live examples: http://jsbin.com/subanakuna/1/edit?html,output

Issue with upgrade to Polymer 0.5.1 and styling paper-dialog

1 Answers