穴を掘って、Polymer 1.1 チュートリアル パート 6 – スタイル (2)_html/css_WEB-ITnose について書いてみましょう

はじめに

ここ数ヶ月、仕事の急な変更により、学習と執筆がスムーズに進むことができませんでしたが、幸いにもすべての面で一時的に安定しました。この期間中、Polymer フォーラムに興味を持ってくださった友人たちから、コメントやプライベート メッセージを通じて更新を中断しないでほしいとの意見が寄せられました。

今日は Polymer スタイルの章を続けます。Polymer 開発環境を新しいマシンにデプロイしたところ、2 か月後に Polymer が静かにバージョン 1.3 にアップグレードされたことがわかりました (ただし、新しいバージョンの変更点はまだ理解していません)。また、Google がこのフレームワークをどれほど重視しているかがわかり、Polymer を学習している友人たちに一撃を与えています。 (この記事を読む前に、bower update コマンドを実行して Polymer を最新バージョンに更新することをお勧めします)

メイントピック

クロススコープ スタイル

背景

Web コンポーネントの場合、Shadow Dom は多くのスコープとスタイルのカプセル化 クラスの利点により、CSS スコープ内でコンポーネントがより安全かつシンプルになります。スタイルは、内部レベルのコンポーネントはもちろん、上位レベルのコンポーネントの介入によっても影響を受けません。

これは、未知の制御不能な外部要因からスタイルを保護するのに非常に役立ちます。しかし、カスタム コンポーネントのスタイルを意図的に変更したい場合はどうすればよいでしょうか?固定テーマの下で特定のコンポーネントに特別なスタイルを変更するなど、この問題によく直面します。たとえば、「custom-checkbox」コンポーネントは .checked クラスを使用しており、別のコンポーネントもたまたま .checked クラスを使用しています。Polymer が提供する Shadow Style 機能は、クラス間の相互影響と相互汚染の問題を効果的に解決できます。同じ名前の質問。

汚染問題を解決するために、従来のアプローチは、CSS 定義に多くのプレフィックスを追加し、Shadow Style で同じ名前のクラスを区別するために (名前空間に似た) dom レベルの定義を多く追加することです。 、ママは重複するクラス名を心配する必要はもうありません。

カスタム CSS プロパティ (または変数と呼ぶ方が適切です)

まずコンポーネントを定義するコードを見てみましょう

<link rel="import" href="../bower_components/polymer/polymer.html"><dom-module id="my-toolbar">    <style>        :host{            padding: 4px;            background-color: gray;        }        .title{            color: var(--my-toolbar-title-color);        }    </style>    <template>        <span class="title">{{title}}</span>    </template>    <script>        Polymer({            is: 'my-toolbar',            properties: {                title: String            }        });    </script></dom-module>

span の className が title であり、title var の定義に奇妙なものが表示されていることがわかります(xxxxxx)

.title{    color: var(--my-toolbar-title-color);}

文字通り、この色は動的値である必要があり、-my-toolbar-title-color はこのコンポーネントの外部の親コンポーネントによって決定される必要があります。外部から渡される特定の色の値を格納する名前。次に、この my-toolbar を使用する親コンポーネントを定義します

<link rel="import" href="../bower_components/polymer/polymer.html"><link rel="import" href="my-toolbar.html"><dom-module id="my-element">    <style>        :host{            --my-toolbar-title-color: green;        }        .warning{            --my-toolbar-title-color:red;        }    </style>    <template>        <my-toolbar title="This one is green."></my-toolbar>        <my-toolbar title="This one is green too."></my-toolbar>        <my-toolbar class="warning" title="This one is red."></my-toolbar>    </template>    <script>        Polymer({            is: 'my-element'        });    </script></dom-module>

コンポーネント my-toolbar で定義された CSS 変数は、それを外部で使用する親コンポーネント my-element によって割り当てることができます。形式的には、カスタム変数 my-toolbar-title-color は新しい css 属性と呼ばれ、値を割り当てることができます (サブタイトルの名前 - カスタム css 属性と同じです)。

もちろん、

color: var(--my-toolbar-title-color, blue);

など、外部の世界が値を割り当てない場合に備えて、var –my-toobar-title-color にデフォルトの初期値を与えることもできます

この種のカスタム CSS 属性は非常に役立ちます従来のスタイルを拡張するため、特に異なる色のテーマを切り替える場合、Firefox は現在この書き込み方法をネイティブでサポートしており、Chrome と Safari もこの機能をサポートすることを発表しています。

カスタム CSS コード ブロック

Sass を知っている人は @mixin に精通しているはずです。Polymer には、ブロック内で CSS スタイルを定義する機能もあります。まず、前の my-toolbar コードを見てみましょう。変更して、@apply を使用してミックスインのスタイル ブロックを受け取る 2 つの変数を宣言します。

<link rel="import" href="../bower_components/polymer/polymer.html"><dom-module id="my-toolbar">    <style>        :host{            padding: 4px;            background-color: gray;            /* apply a mixin*/            @apply(--my-toolbar-theme);        }        .title{            @apply(--my-toolbar-title-theme);        }    </style>    <template>        <span class="title">{{title}}</span>    </template>    <script>        Polymer({            is: 'my-toolbar',            properties: {                title: String            }        });    </script></dom-module>

次に、my-element にいくつかの変更を加えます

<link rel="import" href="../bower_components/polymer/polymer.html"><link rel="import" href="my-toolbar.html"><dom-module id="my-element">    <style>        /* Apply custom theme to toolbars */      :host {        --my-toolbar-theme: {          background-color: yellow;          border-radius: 4px;          border: 1px solid gray;        };        --my-toolbar-title-theme: {          color: green;        };      }      /* Make only toolbars with the .warning class red and bold */      .warning {        --my-toolbar-title-theme: {          color: red;          font-weight: bold;        };      }    </style>    <template>        <my-toolbar title="This one is green."></my-toolbar>        <my-toolbar title="This one is green too."></my-toolbar>        <my-toolbar class="warning" title="This one is red."></my-toolbar>    </template>    <script>        Polymer({            is: 'my-element'        });    </script></dom-module>

実行結果

@apply によって定義された変数が複数のスタイル ブロックのルールを受け取る点を除いて、@apply が実際には前の var と似ていることがわかります。

さて、スタイルの章全体を完了するには、合計 4 ～ 5 つのセクションが必要になる可能性があります。今日は 2 つ目のセクションを完了するために最善を尽くします。 。