Applying styles to elements within paper-dialog

[kbwatts]

It seems difficult to apply css to elements within paper-dialogs other than using inline styling because of the way core-overlay handles the dialogs and seems to remove them from the DOM entirely when not displayed.

For example, paper-input and paper-checkbox should have the same colors across the application, so they should pick up the style for something like:

paper-checkbox::shadow #ink { color: #007e9e; }

But this (anything similar) seems not to affect paper-checkbox within paper-dialog despite correctly styling other non-paper-dialog instances of paper-checkbox. Am I doing something wrong, or is this intentional, or something else altogether?

Here's an example of a paper-dialog I'm using to ask for user feedback:

<paper-action-dialog id="feedbackDialog" heading="Tell us what you think" transition="core-transition-bottom" backdrop>

      <p>Your feedback will help us improve the system.</p>

      <paper-input-decorator label="Your comments (required)" error="input is required!" id="feedbackInput" autofocus>
          <paper-autogrow-textarea>
            <textarea></textarea>
          </paper-autogrow-textarea>
      </paper-input-decorator>

      <core-label horizontal layout>
        <paper-checkbox for></paper-checkbox>
        <div vertical layout>
          <div class="body2">Include my contact information</div>
          <p class="body1">We'll include your name, library barcode and email address so we can get back to you.</p>
        </div>
      </core-label>

      <paper-button dismissive on-tap="{{toggleFeedback}}">Cancel</paper-button>
      <paper-button affirmative class="colored" on-tap="{{sendFeedback}}">Send feedback</paper-button>

    </paper-action-dialog>

[kbwatts]

Perhaps this is done intentionally, and dialogs should not have complex behaviour or require any more user interaction than the buttons.

If this is the case, disregard this one...

[phidias51]

The only workaround I've seen for this is to put the style reference inside the tag, like this:

<polymer-element name="myelement">
<template>
<paper-action-dialog heading="mydialog">
<link rel="stylesheet" href="whatever.css" />

</paper-action-dialog>

</template>
</polymer-element>

[kbwatts]

Nice idea, that, at least, gets away from inline styling.

Have you found a similar workaround for getting js to affect elements within the dialog?

e.g.

<link rel="import" href="whatever.html" />

Where the imported whatever.html contains relevant js? (e.g. what if the user needs to clear the input within the dialog after submitting?)

[kbwatts]

Or <script src="path/to/whatever.js"></script> within the template...

[ssorallen]

This is due to the way the content in a core-overlay, which paper-dialog extends, is inserted into a shadow DOM. To pierce the shadow DOM you need to prepend html /deep/ to your selector:

html /deep/ paper-checkbox::shadow #ink { color: #007e9e; }

[kbwatts]

Good idea - I started doing that after re-reading http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ and it seems to work :+1: