<paper-dialog>'s contents can't be styled by a containing element

jyasskin commented 9 years ago

I tried to write a custom element containing a <paper-dialog> and a <style> section to style the contents of the dialog:

<!DOCTYPE html>
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html"></script>
<style>
  * /deep/ p { background-color: yellow; }
</style>
<polymer-element name="my-dialog">
  <template>
    <style>
      p { font-family: "Comic Sans"; color: red;}
    </style>
    <button on-click="{{show}}">Show My</button>
    <paper-dialog id="dlg" heading="A dialog">
      <p>Red Comic Sans?</p>
    </paper-dialog>
  </template>
  <script>
    Polymer({
      show: function() {
        this.$.dlg.open();
      }
    });
  </script>
</polymer-element>
<polymer-element name="other-dialog">
  <template>
    <style>
      p { font-family: monospace; color: blue;}
    </style>
    <button on-click="{{show}}">Show Other</button>
    <paper-dialog id="dlg" heading="A dialog">
      <p>Blue Monospace?</p>
    </paper-dialog>
  </template>
  <script>
    Polymer({
      show: function() {
        this.$.dlg.open();
      }
    });
  </script>
</polymer-element>

<my-dialog></my-dialog>
<other-dialog></my-dialog>

By moving the whole <paper-dialog> element into the shadow of an <overlay-host>, without pulling along the associated <style> block, you lose any styles I wanted for the content of the dialog. To work around this, I'd have to give each <paper-dialog> a globally-unique ID, which kind of defeats the purpose of web components.

jyasskin commented 9 years ago

It looks like I can work around the problem by putting the <style> element inside the <paper-dialog>. Then it gets moved into the <overlay-host> shadow dom, where it becomes scoped and can apply to the <paper-dialog>'s contents. Maybe this just needs documentation.

ghost commented 9 years ago

+1 having exactly the same issue and using same workaround.

morethanreal commented 9 years ago

That is an unfortunate restriction of layered mode which is the default for paper-dialog to ensure it appears on top of everything else. I'll add more documentation.

KrisSiegel commented 9 years ago

I just ran into this myself and it's counter intuitive to put elements inside of (no other html element works like this). I haven't had a chance to look into it but can this be worked around?

robrez commented 9 years ago

This one is giving me grief as well.

I worked-around by adding a class to my paper-action-dialog and importing a page-level stylesheet that uses html /deep/ .mySpecificClass { }.

Any specific elements used within the dialog need to be styled in a similar fashion. ie: html /deep/ .mySpecificClass > .title { color: blue };

This feels wrong since the page-level stylesheet needs to know the details of my dialog's implementation. I would simply use a non-layered dialog, but I encountered This Issue.

googlearchive / paper-dialog

<paper-dialog>'s contents can't be styled by a containing element #43