ポリマー-シャドウDOMとスタイリング

シャドウDOMは、コンポーネントの構築に使用されるDOMの新しいプロパティです。

例

次のコードでは、ヘッダーコンポーネントにページタイトルとメニューボタンが含まれています。

<header-demo>
   <header>
      <h1>
         <button>

シャドウDOMでは、*シャドウツリー*と呼ばれるスコープ付きサブツリーで子を見つけることができます。

<header-demo>
   #shadow-root
   <header>
      <h1>
      <button>

シャドウルートルートはシャドウツリーの最上部と呼ばれ、ツリーにアタッチされている要素はシャドウホスト（ヘッダーデモ）と呼ばれます。このシャドウホストには、シャドウルートを指定するshadowRootというプロパティが含まれています。シャドウルートは、ホストプロパティを使用してホスト要素を識別します。

シャドウDOMと構成

シャドウDOMに要素がある場合、要素の子の代わりにシャドウツリーをレンダリングできます。 <slot>要素をシャドウツリーに追加することにより、要素の子をレンダリングできます。

たとえば、<header-demo>には次のシャドウツリーを使用します。

<header>
   <h1><slot></slot></h1>
   &ltbutton>Menu</button>
</header>

子を<my-header>要素に追加します-

<header-demo>Shadow DOM</header-demo>

ヘッダーは、</slot>要素を上記の指定された子に置き換えます-

<header-demo>
   <header>
      <h1>Shadow DOM</h1>
      <button>Menu</button>
   </header>
</header-demo>

フォールバックコンテンツ

フォールバックコンテンツは、スロットにノードが割り当てられていないときに表示できます。例えば-

<my-element>
   #shadow-root
   <slot id = "myimgicon">
      <img src = "img-demo.png">
   </slot>
   <slot></slot>
<my-element>

次のように要素に独自のアイコンを提供できます-

<my-element>
   <img slot = "myimgicon" src = "warning.png">
<my-element>

マルチレベル配布

スロット要素をスロットに割り当てることができます。これはマルチレベル配布と呼ばれます。

たとえば、以下に示すようにシャドウツリーの2つのレベルを取ります-

<parent-element>
   #shadow-root
      <child-element>
      <!-- display the light DOM children of parent-element inside child-element -->
      <slot id = "parent-slot">

   <child-element>
      #shadow-root
         <div>
            <!-- Render the light DOM children inside div by using child-element -->
            <slot id = "child-slot">

次のコードを考慮してください-

<parent-element>
   <p>This is light DOM</p>
<parent-element>

平坦化されたツリーの構造は次のようになります。

<parent-element>
   <child-element>
      <div>
         <slot id = "child-slot">
            <slot id = "parent-slot">
               <p>This is light DOM</p>

シャドウDOMは、配布を確認するために次のスロットAPIを使用します-

HTMLElement.assignedSlot -スロットへの要素の割り当てがない場合、要素にスロットを割り当て、nullを返します。
HTMLSlotElement.assignedNodes -flattenオプションをtrueに設定すると、スロットとともにノードのリストを提供し、分散ノードを返します。
HTMLSlotElement.slotchange -このイベントは、スロットの分散ノードに変更があるとトリガーされます。

イベントのリターゲティング

リスニング要素と同じスコープで要素を表すことができるイベントのターゲットを指定します。カスタム要素からのイベントを提供します。これは、内部要素ではなく、カスタム要素タグから来ているように見えます。

例

次の例は、Polymer.jsでのイベントのリターゲットの使用を示しています。 indexlというファイルを作成し、その中に次のコードを挿入します。

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymerl">
      <link rel = "import" href = "retarget-eventl">
   </head>

   <body>
      <template id = "myapp" is = "dom-bind">
         <retarget-event on-tap = "clicky"></retarget-event>
      </template>

      <script>
         var myval = document.querySelector('#myapp');
         myval.clicky = function(e) {
            console.log("The retargeted result:", Polymer.dom(myval));
            console.log("Normal result:", e);
         };
      </script>
   </body>
</html>

次に、retarget-eventlという別のファイルを作成し、次のコードを含めます。

<link rel = "import" href = "bower_components/polymer/polymer-elementl">

//it specifies the start of an element's local DOM
<dom-module id = "retarget-event">

   <template>
      <span>Click on this text to see result in console...</span>
   </template>

   <script>
      Polymer ({
         is: 'retarget-event',
      });
   </script>
</dom-module>

出力

アプリケーションを実行するには、作成されたプロジェクトディレクトリに移動し、次のコマンドを実行します。

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

ポリマーリターゲットイベント

上記のテキストをクリックしてコンソールを開き、次のスクリーンショットに示すように、リターゲットされたイベントを確認します。

ポリマーリターゲットイベント

シャドウDOMスタイリング

ホストからシャドウツリーに継承するスタイルプロパティを使用して、シャドウDOMのスタイルを設定できます。

例

<style>
   .mydemo { background-color: grey; }
</style>

<my-element>
#shadow-root
   <style>
     //this div will have blue background color
      div { background-color: orange; }
   </style>
   <div class = "mydemo">Demo</div>

DOMテンプレート

DOMテンプレートを使用して、要素のDOMサブツリーを作成できます。 DOMテンプレートを要素に追加することで、要素のシャドウルートを作成し、テンプレートをシャドウツリーにコピーできます。

DOMテンプレートは2つの方法で指定することができます-

<dom-module>要素を作成します。これはid属性とともに要素の名前と一致する必要があります。
<dom-module>内に<template>要素を定義します。

例

<dom-module id = "my-template">
   <template>I am in my template!!!</template>

   <script>
      class MyTemplate extends Polymer.Element {
         static get is() { return  'my-template' }
      }
      customElements.define(MyTemplate.is, MyTemplate);
   </script>
</dom-module>

要素のシャドウDOMのスタイル設定

Shadow DOMでは、フォント、テキストの色、クラスなどのスタイルプロパティを使用して、要素の範囲外に適用せずにカスタム要素のスタイルを設定できます。

：host *セレクターを使用してホスト要素のスタイルを設定します（シャドウDOMに接続された要素はホストと呼ばれます）。 Polymer-applというファイルを作成し、その中に次のコードを追加します。

<link rel = "import" href = "../../bower_components/polymer/polymer-elementl">

<dom-module id = "polymer-app">
   <template>
      <style>
         :host {
            color:#33ACC9;
         }
      </style>
      <h2>Hello...[[myval]]!</h2>
  </template>

  <script>
      class PolymerApp extends Polymer.Element {
         static get is() { return 'polymer-app'; }
         static get properties() {
            return {
               myval: {
                  type: String, value: 'Welcome to finddevguides!!!'
               }
            };
         }
      }

      window.customElements.define(PolymerApp.is, PolymerApp);
   </script>
</dom-module>

前のリンク：/polymer/polymer_custom_elements [chapter]に示すようにアプリケーションを実行し、 http：//127.0.0.1：8000/ に移動します。出力は次のようになります。

ポリマーシャドウDOMスタイリング

スタイルスロットコンテンツ

要素のテンプレートに*スロット*を作成し、実行時に使用することができます。

例

次の例は、要素のテンプレートでのスロット付きコンテンツの使用を示しています。 indexlファイルを作成し、その中に次のコードを追加します。

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <link rel = "import" href = "bower_components/polymer/polymerl">
      <link rel = "import" href = "slotted-contentl">
   </head>

   <body>
      <slotted-content>
         <div slot = "text">This is Polymer.JS Slotted Content Example</div>
      </slotted-content>
   </body>
</html>

次に、slotted-contentlという別のファイルを作成し、次のコードを含めます。

<link rel = "import" href = "bower_components/polymer/polymer-elementl">

<dom-module id = "slotted-content">
   <template>
      <style>
         ::slotted(*) {
            font-family: sans-serif;
            color:#E94A9D;
         }
      </style>

      <h2>Hello...[[prop1]]</h2>
      <h3>
         <div><slot name='text'></slot></div>
      </h3>
   </template>

   <script>
      Polymer ({
         is: 'slotted-content', properties: {
            prop1: {
               type: String,
               value: 'Welcome to finddevguides!!',
            },
         },
      });
   </script>
</dom-module>

前の例のようにアプリケーションを実行し、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

ポリマースタイルスロットコンテンツ

スタイルモジュールの使用

スタイルモジュールと共に、要素間でスタイルを共有できます。スタイルモジュールでスタイルを指定し、要素間で共有します。

例

次の例は、要素間でスタイルモジュールを使用する方法を示しています。 indexlファイルを作成し、その中に次のコードを追加します。

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <link rel = "import" href = "bower_components/polymer/polymerl">
      <link rel = "import" href = "style-modulel">
   </head>

   <body>
      <style-module></style-module>
   </body>
</html>

次のコードを使用して、style-modulelという別のファイルを作成します。

<link rel = "import" href = "bower_components/polymer/polymer-elementl">

<dom-module id = "style-module">
   <template>
      <!-- here, including the imported styles from colors-module page -->
      <style include="colors-module"></style>
      <style>
         :host {
            font-family: sans-serif;
            color: green;
         }
      </style>

      <h2>Hello...[[prop1]]</h2>
      <p class = "color1">Sharing styles with style modules 1...</p>
      <p class = "color2">Sharing styles with style modules 2...</p>
      <p class = "color3">Sharing styles with style modules 3...</p>
   </template>

   <script>
      Polymer ({
         is: 'style-module', properties: {
            prop1: {
               type: String, value: 'Welcome to finddevguides!!',
            },
         },
      });
   </script>
</dom-module>

次に、_colors-modulel_というファイルをもう1つ作成します。このファイルは、次のコードに示すように、スタイルモジュールを要素に提供します。

<link rel = "import" href = "bower_components/polymer/polymer-elementl">

<dom-module id = 'colors-module'>
   <template>
      <style>
         p.color1 {
            color: #EA5AA5;
         }
         p.color2 {
            color: #4B61EA;
         }
         p.color3 {
            color: #D3AA0A;
         }
      </style>
   </template>
</dom-module>

アプリケーションを実行し、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

ポリマースタイルモジュール

カスタムプロパティを使用する

カスタムCSSプロパティを使用して、Polymer要素を使用してアプリケーション内の要素の外観をスタイルできます。カスタムプロパティはカスケードCSS変数を提供します。これは、スタイルシートを介したスタイルデータの散乱を防ぐカスタム要素の環境外で使用できます。

カスタムプロパティは、構成されたDOMツリーから継承する標準のCSSプロパティと同様に定義できます。前の例では、要素に定義されたカスタムCSSプロパティを確認できます。

CSS継承では、要素にスタイルが定義されていない場合、次のコードに示すように、親からスタイルを継承します。

<link rel = "import" href = "components/polymer/myelement-stylel">
<myelement-style>
   <style is = "myelement-style">
      p {
         color: var(--paper-red-900);
      }
      paper-checkbox {
         --paper-checkbox-checked-color: var(--paper-red-900);
      }
   </style>
</myelement-style>

<body>
   <p><paper-checkbox>Check Here</paper-checkbox></p>
</body>

Polymer-shadow-dom-and-styling