JSFiddle - React, Tailwind, and code Playground

HTML

<script>Polymer = {dom: 'shadow', lazyRegister: true, useNativeCustomProperties: true};</script>
<base href="https://polygit.org/polymer+:master/*+:master/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="paper-dialog-behavior/paper-dialog-shared-styles.html">
<link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html.html">

<dom-module id="x-foo">
  <template>
    <style include="paper-dialog-shared-styles">
      :host {
        --paper-dialog: {
          line-height: initial;
        };
      }
    </style>
    <div id="title-bar" class="horizontal justified layout">
      <content select=".title"></content>
      <paper-icon-button icon="cr:close" id="close" dialog-dismiss>
      </paper-icon-button>
    </div>
    <content select=".body"></content>
    <content select=".footer"></content>
  </template>
</dom-module>

<x-foo opened>
      <div id="div" class="body">
        hello world
        <br>hello world
      </div>
</x-foo>

JavaScript

Polymer({
is: 'x-foo',
behaviors: [Polymer.PaperDialogBehavior],
});

console.log(Polymer.version);
setTimeout(function() {
  console.log(getComputedStyle(document.querySelector('* /deep/ x-foo /deep/ #div')).lineHeight);
})