参考：Issue with upgrade to Polymer 0.5.1 and styling paper-dialog
ルート以外の要素で paper-dialog を使う場合、一工夫いるようです。
原因の要約
- paper-dialog （paper-action-dialog など含む）がデフォルトで layered プロパティが true に設定されている
- ダイアログを常に画面前面に表示するため
- layered が true の要素は、 core-overlay-layer というグローバルな要素に親が変更される
- Developer Console を開いて Element のタブを開くとそのことがわかります
- paper-dialog を使用している要素のスコープから外れてしまうので、そこで定義した css の style が適用されない
対策
リンク先では以下の3通りが紹介されています。 ひとまず、汎用的に思える core-style を使うことにしました。
- layered を false にする
- core-style を使う
- paper-dialog を継承したカスタムエレメントを作成する
サンプル
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-dialog/paper-action-dialog.html">
<link rel="import" href="/bower_components/core-style/core-style.html">
<core-style id="my-dialog-style">
html /deep/ {
width: 16px;
height: 16px;
}
html /deep/ paper-action-dialog::shadow #scroller {
width: 360px;
height: 360px;
}
</core-style>
<core-style ref="my-dialog-style"></core-style>
<polymer-element name="my-paper-action-dialog" attributes="toggle">
<template>
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<paper-action-dialog id="dialog">
<div>
...
</div>
<paper-button dismissive>CANCEL</paper-button>
<paper-button affirmative>OK</paper-button>
</paper-action-dialog>
</template>
<script>
Polymer({
toggle: function () {
this.$.dialog.toggle();
}
});
</script>
</polymer-element>
