Step 5: カスタムCSSプロパティによるテーマ設定

ここまでで基本的な機能を持ったボタンができました。しかし、それは押された状態と押されていない状態の両方に既存のテキストカラーを使用したまま止まっています。もうちょっと装飾されたものが欲しいと思ったらどうすれば良いのでしょうか？

Shadow DOMはユーザーが誤ってエレメントの内部をスタイリングしてしまうのを防ぐのに役立ちます。カスタムCSSプロパティ を使用することでコンポーネントにスタイルを設定できるようになります。 Polymerは、カスケーディング変数のCSSカスタムプロパティ仕様からインスピレーションを得たカスタムCSSプロパティを実装しています。

var関数を使用してエレメント内にカスタムプロパティを適用します。

background-color: var(--my-custom-property, defaultValue);

--my-custom-propertyはカスタムプロパティ名で、常に2つのダッシュ（ - ）で始まり、 defaultValueはカスタムプロパティが設定されていない場合に使用される（オプションの）CSSの値です。

Add new custom property values

エレメントの<style>タグ内を編集し、fillとstrokeの値をカスタムプロパティで置き換えます:

icon-toggle.html: Before

  <style>
    /* local styles go here */
    :host {
      display: inline-block;
    }
    iron-icon {
      fill: rgba(0,0,0,0);
      stroke: currentcolor;
    }
    :host([pressed]) iron-icon {
      fill: currentcolor;
    }
  </style>

icon-toggle.html: After

  <style>
    /* local styles go here */
    :host {
      display: inline-block;
    }
    iron-icon {
      fill: var(--icon-toggle-color, rgba(0,0,0,0));
      stroke: var(--icon-toggle-outline-color, currentcolor);
    }
    :host([pressed]) iron-icon {
      fill: var(--icon-toggle-pressed-color, currentcolor);
    }
  </style>

デフォルト値のおかげで、colorを設定するだけで<icon-toggle>のスタイルを変更することができますが、他にもオプションがあります。

demoフォルダからdemo-element.htmlを開き、新しいプロパティを設定します。

demo-element.html: Before

    <style>
      :host {
        font-family: sans-serif;
      }
    </style>

demo-element.html: After

    <style>
      :host {
        font-family: sans-serif;
        --icon-toggle-color: lightgrey;
        --icon-toggle-outline-color: black;
        --icon-toggle-pressed-color: red;
      }
    </style>

デモをもう一度実行してカラフルなエレメントを手に入れましょう。

Demo showing
icon toggles with star and heart icons. Pressed icons are red.

それでおしまいです - エレメントが完成しました。基本的なUI、API、カスタムスタイルプロパティを持つエレメントが作成されました。

もしエレメントの動作に問題がある場合は、完成版をチェックしてください。

カスタムプロパティについてもう少し詳しく知りたければ、以下の説明を読んでください。

Extra credit: ドキュメントレベルでカスタムプロパティを設定する

たとえば、ドキュメントレベルでカスタムプロパティの値を定義して、アプリケーション全体のテーマを設定したいことがよくあります。カスタムプロパティはほとんどのブラウザに組み込まれていないため、Polymer Elementの外でカスタムプロパティを定義するには、特別なcustom-styleタグを使用する必要があります。 index.htmlファイルの<head>タグの中に次のコードを追加してみてください：

<custom-style>
  <style>
    /* Define a document-wide default—will not override a :host rule in  */
    html {
      --icon-toggle-outline-color: red;
    }
    /* Override the value specified in demo-element */
    demo-element {
      --icon-toggle-pressed-color: blue;
    }
    /* This rule does not work! */
    body {
      --icon-toggle-color: purple;
    }
  </style>
</custom-style>

重要事項:

demo-elementセレクタはdemo-elementエレメントと一致し、demo-elementのhtmlルールよりも 高い特異性 を持つため、そこで値を上書きします。
カスタムプロパティは、htmlセレクタ またはPolymer Custom Element と一致するルールセットの中でのみ定義できます。これは、Polymerに実装されているカスタムプロパティの制限です。

デモをもう一度実行すると、押されたボタンは青色になりますが、メインカラーとアウトラインカラーは変更されていません。

--icon-toggle-colorプロパティはbodyタグに適用できないため、設定されません。このルールをdemo-elementブロックに移動して、適用されていることを確認してください。

htmlルールセットは、--icon-toggle-outline-colorのドキュメント全体のデフォルト値を作成します。しかし、この値は、demo-elementエレメント内の対応するルールによってオーバーライドされます。このデフォルト値での動作を確認するには、demo-element.htmlの対応するルールをコメントアウトしてください:

demo-element.html

    <style>
      :host {
        font-family: sans-serif;
        --icon-toggle-color: lightgrey;
        /* --icon-toggle-outline-color: black; */
        --icon-toggle-pressed-color: red;
      }
    </style>

最後に、custom-style内のセレクタと一致させるには、エレメントが ドキュメントスコープ内 (たとえば、index.htmlなど。別のエレメントのShadow DOMの中ではない。)になければならないことに注意してください。たとえば、これらのルールはcustom-style内では機能 しません:

    iron-icon {
      --iron-icon-width: 40px;
      --iron-icon-height: 40px;
    }

これは、このiron-iconエレメントが別の要素のShadow DOMの内側にあるためです。ただし、カスタムプロパティはツリーを継承しているため、これらのプロパティをドキュメントレベルで設定して、ページ上のすべてのiron-iconエレメントのサイズを設定することができます:

    html {
      --iron-icon-width: 40px;
      --iron-icon-height: 40px;
    }

詳細については、カスタムCSSプロパティに関するドキュメントを参照してください。

あなたオリジナルのエレメントを使い始める準備はできていますか？Polymer CLIを使用してエレメントのプロジェクトを作成することができます。

また、Polymer App Toolboxを使用してアプリケーション開発をスタートするには Build an appのチュートリアルを見てみましょう。

または前のセクションを見直してください:

Previous Step: インプットに反応させる