Paper Dialog only uses Material Design Styles in Chrome

[CodeRedPaul]

Hi there

I'm creating a widget as a library to be hosted in any page. When it's hosted in a blank page the material design styles are implemented, but as soon as I host my <paper-dialog> on a site / page that has <h2> and text styles defined, the dialog displays using the site's styles. And to make it worse, it's not consistent across browsers. Chrome works well and applies the correct material design styles but other browsers don't. Any ideas on what could be happening?

In Chrome it works ok (FYI - the "Improve Customer Satisfaction" text in the screenshot is a <h2>):

But in Firefox it's using the page's styling:

It's a tad weird.

The whole reason I chose Polymer / Webcomponents it because it uses Shadow DOM and is meant to avoid leaky styles and keep the components completely isolated.

In case it helps, here's my entire <paper-dialog> markup:

  <paper-dialog id="modal" modal on-iron-overlay-closed="onDialogClosed" oniron-overlay-canceled="onDialogCancelled">
    <iron-pages selected$="{{pageName}}" attr-for-selected="page-name" on-iron-select="onSelectedPageChanged">
      <div page-name="feedback" class="container">
        <iron-fit-impl vertical-align="top">
          <h2>[[introductionStatement]]</h2>
          <div>
            [[mainQuestion]]
            <paper-slider id="ratings" pin snaps min="[[answerValueMin]]" max="[[answerValueMax]]" max-markers="[[answerValueMax]]" step="1" immediate-value="{{rating}}" on-immediate-value-changed="onSliderImmediateChange"></paper-slider>
            <div style="float: right; width: 5%; text-align: right; padding-top: 22px;">
              <h2>{{rating}}</h3>
            </div>
          </div>
          <div  style="float: left; width: 80%">
            <paper-textarea label$="[[selectedAnswerRangeQuestion]] (optional)" on-value-changed="onAnswerRangeQuestionResponseChange" value="{{answerRangeQuestionResponse}}"></paper-textarea>
            <br/>
          </div>
          <div>
            <div class="buttons" style="float: right">
              <paper-button dialog-dismiss>Maybe later...</paper-button>
              <paper-button dialog-confirm>Send my feedback</paper-button>
            </div>
          </div>
        </iron-fit-impl>
      </div>
      <div page-name="submitting" class="container">
        <iron-fit-impl vertical-align="top">
          <h2>Your feedback is being submitted</h2>
          We're submitting your feedback. Come back and check in a moment.
          <br/>
          <div class="buttons" style="float: right">
            <paper-button dialog-dismiss>OK</paper-button>
          </div>
        </iron-fit-impl>
      </div>
      <div page-name="submitted" class="container">
        <iron-fit-impl vertical-align="top">
          <h2>Your feedback has been submitted</h2>
          You won't be asked again for a while
          <br/>
          <div class="buttons" style="float: right">
            <paper-button dialog-dismiss>OK</paper-button>
          </div>
        </iron-fit-impl>
      </div>
      <div page-name="retry" class="container">
        <iron-fit-impl vertical-align="top">
          <h2>Your feedback has failed submission</h2>
          Please try again
          <br/>
          <div class="buttons" style="float: right">
            <paper-button dialog-confirm>Resend my feedback</paper-button>
          </div>
        </iron-fit-impl>
      </div>
    </iron-pages>
  </paper-dialog>

For a DEMO please take a look at the following site and click on the yellow feedback FAB at the bottom right: https://code-red-solutions.github.io/NPS-CodeTest/

Any ideas why the material design isn't being applied?

Cheers,

Paul

PS: It seems to be the OPPOSITE to the issue at https://github.com/PolymerElements/paper-dialog/issues/28 where it's clear that the spec is to enforce Material Design Styles to be applied.

[CodeRedPaul]

Oh, and this is what Firefox renders when it's hosted in a blank page with no styling:

[CodeRedPaul]

And in Edge it also display the vertical scrollbars on the <paper-textarea label>

:(