【Polymer 1.0】スタイリング

導入

Polymerは、Shadow DOMスタイリングのルールに従い、カスタムエレメントのLocal DOMに対するScopedスタイル(範囲を限定して適用されるスタイル)を提供します。Scopedスタイルは<style>タグをLocal DOMテンプレート(<template>タグ)の中に配置します。

以下はシンプルなスタイリングのサンプルです。:hostはカスタムエレメント自身のスタイルを定義する場所です。::content擬似エレメントは<content>タグに挿入されるLight DOMのエレメントに対するスタイルを定義します。

⇒ ソースコード

<dom-module id="my-element">
  <template>
    <style>
      :host {
        display: block;
        border: 1px solid red;
      }
      #child-element {
        background: yellow;
      }
      .content-wrapper ::content > .special {
        background: orange;
      }
    </style>
    
    <div id="child-element">In local DOM!</div>
    <div class="content-wrapper">
      <content></content>
    </div>
  </template>
  
  <script>
    Polymer({ is: 'my-element' });
  </script>
</dom-module>

<my-element>
  <div class="special">In light DOM!</div>
</my-element>

f:id:masterpg:20160923104157p:plain

カスタムエレメントの外にスタイルを配置したい、またはカスタムエレメント間でスタイルを共有するには、共有スタイルと外部スタイルシートを参照ください。

PolymerのカスタムCSSプロパティのshimは、カスタムエレメントの作成時に一度カスタムCSSプロパティの評価と適用を行います。ただし、テーマの変更などによってCSSクラスが動的に変更されるような場合、このカスタムCSSプロパティの再評価をエレメント(とそのサブツリー)にさせるために、this.updateStyles()を実行してください。ページ上の全てのエレメントを更新させるには、Polymer.updateStyles()を実行してください。

また、利用者はカスタムエレメントによって提供されるcustomStyleにkey-valueペアを設定することで、カスタムCSSプロパティを直接編集することができます。その後updateStyles()を実行してください。

次のサンプルでは、変更ボタンの押下によって、カスタムCSSプロパティを含んだクラスの付加/削除と、customStyleでカスタムCSSプロパティを直接編集しています。また、この編集内容を反映するためにthis.updateStyles()を実行しています:

⇒ ソースコード

作成者側の例:

<dom-module id="my-toolbar">
  <style>
    :host {
      padding: 4px;
      background-color: var(--my-toolbar-bg);
    }
    .title {
      color: var(--my-toolbar-color);
    }
  </style>
  
  <template>
    <span class="title"><content></content></span>
  </template>
  
  <script>
    Polymer({
      is: 'my-toolbar'
    });
  </script>
</dom-module>

利用者側の例:

<dom-module id="my-element">
  <style>
    :host {
      --my-toolbar-bg: blue;
      --my-toolbar-color: white;
    }
    .warning {
      --my-toolbar-color: red;
    }
  </style>
  
  <template>
    <my-toolbar id="toolBar">My awesome app</my-toolbar>
    <button on-tap="changeOnTap">変更</button>
  </template>
  
  <script>
    Polymer({
      is: 'my-element',
      _warn: false,
      changeOnTap: function () {
        this._warn = !this._warn;
        if (this._warn) {
          // my-toolbarにwarningクラス付加
          this.$.toolBar.classList.add('warning');
          // my-toolbarの背景色を緑に変更
          this.customStyle['--my-toolbar-bg'] = 'green';
        } else {
          // my-toolbarのwarningクラス削除
          this.$.toolBar.classList.remove('warning');
          // my-toolbarの背景色を青に変更
          this.customStyle['--my-toolbar-bg'] = 'blue';
        }
        // 変更したスタイルの反映(これを実行しないと変更が反映されない)
        this.updateStyles();
      }
    });
  </script>
</dom-module>

f:id:masterpg:20160923104553p:plain

メインドキュメントでのスタイリング

custom-styleをメインドキュメントで使用することで、アプリケーション全体に関わるスタイルを定義することができます:

ブラウザがShadow DOMをサポートしていなくても、custom-styleで定義さたスタイルはカスタムエレメントのLocal DOMへ影響しないことを保証します。
ブラウザがShadow DOMをサポートしていなくても、Shadow DOMの仕様である/deep/と::shadowコンビネータを使用できます。
custom-styleでもカスタムCSSプロパティを定義できます。全てのカスタムエレメントに適用するカスタムCSSプロパティは:rootセレクタで定義してください。

⇒ ソースコード

<!DOCTYPE html>
<html>
<head>
  <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="../bower_components/polymer/polymer.html">

  <!-- custom-styleを使用してスタイルを定義 -->
  <style is="custom-style">
    /* カスタムエレメントのLocal DOMに影響をあたえずに、アプリケーション全体の設定ができる */
    div {
      color: white;
      font-style: italic;
      background-color: green;
    }
    /* /deep/ と ::shadow コンビネータを使用することができる */
    body /deep/ my-element::shadow .title {
      color: red;
    }
    /* アプリケーション全体で使用可能なカスタムCSSプロパティを定義できる */
    :root {
      --my-element-title-background: blue;
    }
  </style>

</head>
<body>

<!--
  メインドキュメントでアプリケーション全体で使用するdivに対してスタイルが定義されており、
  これが適用されてHeaderとFooterの文字は白でイタリック、背景色は緑になる。
  ただしmy-elementにはこのスタイルは適用されない。
-->
<div>Header</div>
<my-element></my-element>
<div>Footer</div>

<dom-module id="my-element">
  <template>
    <style>
      /**
       * メインドキュメントで /deep/ と ::shadow を使用して.titleにスタイルが定義されており、
       * それが適用されてタイトルの文字色が赤になる。
       */
      .title {
        /* メインドキュメントで設定された青が背景色に設定される */
        background-color: var(--my-element-title-background);
      }
    </style>

    <div class="title">My Element!</div>
  </template>

  <script>
    document.addEventListener('WebComponentsReady', function () {
      Polymer({
        is: 'my-element'
      });
    });
  </script>
</dom-module>

</body>
</html>

f:id:masterpg:20160923104637p:plain

カスタムエレメントでも上記のようなcustom-styleの機能を利用できます。ただし:rootセレクタは例外で、このセレクタはドキュメントレベルでしか利用できません。

共有スタイルと外部スタイルシート

<dom-module>の中にスタイル一式をパッケージすることより複数のカスタムエレメントでスタイル定義を共有することができます。このように<dom-module>が保持するスタイルはスタイルモジュールと呼びます。

スタイルモジュールはパッケージされたスタイル一式を名前付けし、カスタムエレメントまたはcustom-styleエレメントで利用できます。

スタイルモジュールは<dom-module>エレメントの中に定義してください:

shared-styles.html

<dom-module id="shared-styles">
  <template>
    <style>
      .red { color: red; }
    </style>
  </template>
</dom-module>

id属性はスタイルモジュールを参照するための名前を指定します。スタイルモジュールの名前はカスタムエレメントと同じ名前空間を使用するので、カスタムエレメントとスタイルモジュールでidが競合しないようにしてください。

定義されたスタイルモジュールを使用するには2つの作業が必要です。まず<link>タグでスタイルモジュールをインポートし、次に<style>タグでスタイルをインクルードします。

次の例ではカスタムエレメントでスタイルモジュールを使用しています:

<!-- スタイルモジュールをインポート -->
<link rel="import" href="../shared-styles/shared-styles.html">
<dom-module id="my-element">
  <template>
    <!-- スタイルモジュールの名前を指定してスタイルをインクルード -->
    <style include="shared-styles"></style>
    <style>
      :host {
        display: block;
      }
    </style>
    <span>My Element!</span>
  </template>
  <script>Polymer({is: 'my-element'});</script>
</dom-module>

上記例では、スタイルモジュールをインクルードする<style>と、カスタムエレメント自身のスタイルを定義する<style>のように分けていましたが、分けずに1つの<style>で記述することもできます:

<style include="shared-styles">
  :host {
    display: block;
  }
</style>

このように1つの<style>で記述した場合、カスタムエレメント自身のスタイルが定義された後にスタイルモジュールが適用されるので、スタイルモジュールの方が優先(上書き)されることになります。ただしこの動作は将来的に変更されるかもしれません。

また、custom-styleエレメントの中でもスタイルモジュールを使用できます:

<!-- スタイルモジュールをインポート -->
<link rel="import" href="../shared-styles/shared-styles.html">
<!-- スタイルモジュールの名前を指定してスタイルをインクルード -->
<style is="custom-style" include="shared-styles"></style>

次にスタイルモジュールを使用したサンプルを示します:

⇒ ソースコード

shared-styles.html

<dom-module id="shared-styles">
  <template>
    <style>
      .title { color: white; }
    </style>
  </template>
</dom-module>

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="../bower_components/polymer/polymer.html">
  <!-- スタイルモジュールをインポート -->
  <link rel="import" href="shared-styles/shared-styles.html">
</head>
<body>

<my-element></my-element>

<dom-module id="my-element">
  <template>
    <!-- スタイルモジュールのスタイルをインクルード -->
    <style include="shared-styles">
      .title {
        background-color: blue;
      }
    </style>

    <div class="title">My Element!</div>
  </template>

  <script>
    document.addEventListener('WebComponentsReady', function () {
      Polymer({
        is: 'my-element'
      });
    });
  </script>
</dom-module>

</body>
</html>

f:id:masterpg:20160923104713p:plain

本文章はPolymer Authorsによる｢Styling local DOM｣を翻訳・改変したものです。原作品のライセンスはCC BY 3.0です。

【Polymer 1.0】目次へ

Master PG

プログラムし続ける...

【Polymer 1.0】スタイリング

目次

導入

<content>タグに挿入されるエレメントのスタイリング

スコープを横断するスタイリング

カスタムCSSプロパティ

カスタムCSSプロパティの値設定に関する制限

カスタムCSS Mixin

カスタムCSSプロパティAPI

メインドキュメントでのスタイリング

共有スタイルと外部スタイルシート