Polymer : paper-dialog （paper-action-dialog）のスタイルを設定する

paper-dialog 公式ドキュメント に従って /deep/ を使っても width や height が上手く設定できずに悩んでいたのですが、原因は以下のサイトの内容でした。

参考：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>