数年前、私は最初にWebコンポーネントについて聞いた。 最初は本当に興味がありましたが、周囲の誇大広告が落ち着くとすぐに、彼らはすぐに私の頭から飛び出しました。 しかし、判明したように、最近、興味深い動きが起こり、この技術に対するサポートが大幅に増加しました。 特に、レスポンシブWebコンポーネントは、レスポンシブデザインへのアプローチを簡素化するように設計されています。 なんて有望だろう！
このテクノロジーを使用する前に、開発者が知っておくべき4つのポイントを以下に示します。
- 技術サポート;
- クロスブラウザ作業。
- 特定のプロジェクトの環境における適応の可能性。
- モジュラーアプローチ。
この記事では、これらの各ポイントを個別に検討します...
*この記事は情報提供のみを目的として翻訳されており、Webコンポーネントの使用を強制するものではありません。この技術のサポートはまだ遅れているためです。
Webコンポーネントとは何ですか？
実際、これはW3仕様の技術であり、独自のHTML要素を作成できます。 彼女について文字通り何も聞いていない場合は、 この記事をよく理解しておくことをお勧めします。使用する用語の中には、少なくとも基本的な理解が必要なものがあります。
なぜ使用したいのですか？
Webコンポーネントを使用する場合の良い例は、ブラウザーにネイティブに存在しないユーザーインターフェイスを作成する必要があるタスクです-カラーセレクター、カルーセル、アコーディオン、オートコンプリートを含むフィールドなどの要素。 これは、プロジェクト間で使用するのと同じコンポーネントの代わりに使用できます。以前は、現在のコンポーネントの要件に合わせて遅延カスタマイズしていました。 これらは、ソーシャルボタン、サブスクリプションフォーム、通知などです。 Webコンポーネントを使用すると、マークアップ、スタイル、およびスクリプトを1つの封印されたモジュールにリンクし、HTMLタグ（<color-picker> </ color-picker>など）を使用してリンクできます。 既にAngularディレクティブまたはReactコンポーネントを使用している場合、これはかなりおなじみですが、ここでの利点は、このアプローチがブラウザおよびフレームワークの「不可知論」にネイティブであることです。
Webコンポーネントを使用すると、UI要素を一度作成してから、どこでも使用できます。 これは、各コンポーネントの単一の真実のソース（各コンポーネントが独自の動作と表示のルールに該当する）を備えたライブラリを作成するリビングスタイルのリファレンス（またはスタイルガイド）などのプロジェクトに最適です。 このアプローチは、より短く、最小限のコード、および既製のUIコンポーネントの可用性、ユーザーまたはチームが現在のインターフェースに簡単に追加できるリンクを意味します。
Webコンポーネントを使用するもう1つの大きな利点は、モジュールをパックして他の開発者/ Webサイト所有者と共有できることです。 実際、ユーザーは自分のWebサイトにimportステートメントを追加するだけです。
<link rel="import" href="http://url.com/subscribe-form.html">
そして、このWebコンポーネントに対して定義されているカスタム要素タグを使用します。 そのため、ユーザーは自分のWebサイトに好きなだけカスタムWebコンポーネントを追加できます。 たとえば、サブスクリプションフォームの場合、タグ<subscribe-form> </ subscribe-form>を使用して、ページ上の1つまたは複数の場所に配置できます。 もちろん、これを行う前に、作成したWebコンポーネントが十分な柔軟性を持ち、さまざまなデバイスや画面サイズで適切に機能することを確認する必要があります。
理論から実践へ
何かを説明する最良の方法は例を使用することだと思います。 さらに私の話は、上記のサブスクリプションフォームでの作業の説明になります。 これは、さまざまなサイトや実装間であまり変わらないユーザーインターフェイスの良い例です。
たとえば、前に作成したフォームを使用します。
このテンプレート内で、フォームの基本的なマークアップを作成しました。
<ul class="form"> <li class="form__item"> <label for="name">Name:</label> <input id="name" name="name" type="text"> </li> <li class="form__item"> <label for="name">Email:</label> <input id="name" name="name" type="text"> </li> </ul>
私のマークアップとスタイルは、 Shadow DOM仕様が提供する機能を使用してWebコンポーネント内に隠されています。 この方法では、一種のカプセル化が行われます。これにより、親Webサイトのスタイルの影響を心配することなく、 ラベルセレクターと入力セレクターを自由に使用できます。
わかりやすく簡潔にするため、マークアップの表示に使用したスタイル以外のスタイルの記述については説明しません。 float：leftおよびdisplay：テーブルプロパティの組み合わせを使用して、このインターフェイスを実装し、任意の幅で破損しないようにしました。
.form__item { display: table; float: left; width: 50%; } label { display: table-cell; width: auto; } input { display: table-cell; width: 100%; }
レッスンの過程で、スクリーンショットを使用して作業を実証します。
これで完了です。順応性を達成するためのテクニックを見てみましょう。
メディアに関するお問い合わせ
誰もが知っている、愛する古典的なアプローチは、レスポンシブWebコンポーネントでも同様に機能します。 デフォルトのコントロールポイントを作成する場合は、テンプレート内でメディアクエリを使用できます。 一方、「フック」を使用して（クラスを作成するなど）、それらを親コンテナーに適用すると、ユーザーが独自の決定を下す可能性が残ります。 この場合、必要なのは、コントロールポイントを作成し、それに到達して、子のfloatプロパティをキャンセルし、幅を100％に設定することだけです。
@media (max-width: 30em) { .form__item { float: none; width: 100%; } }
ただし、メディアクエリだけでは十分ではありません。
作成されたサブスクリプションフォームに満足しています。ページの本文でうまく機能しますが、サイトの作成者がサイドバーに入れたい場合はどうなりますか？ 突然私のフォームは圧縮され、使用できるようには見えません。
これは、Webコンポーネントがその境界を認識しないためです。コンテキストについてはわかりません。
しかし、やめて！ Webコンポーネントは、単に機能するサイトのどこにでも挿入できるようにするためのものではありませんか？ さて、前に作成したWebコンポーネントがこれを実行しないことは明らかですが、目標を達成するために使用できるいくつかの方法があります。
Flexboxハック
プロジェクトでWebコンポーネントを使用する予定があり、古いブラウザ（IE9など）のサポートを犠牲にする準備ができている場合、Flexboxのちょっとした魔法はまったく害を与えません。 これは優れたソリューションであり、さらにJavaScriptの使用をまったく必要としません。
繰り返しますが、以下のコードには、マークアップの表示に使用したスタイルのみが含まれています。
.form { display: flex; flex-wrap: wrap; } .form__item { align-items: center; display: flex; flex: 1 0 320px; flex-wrap: wrap; max-width: 100%; } label { flex: 1 0 90px; } input { flex: 1 0 230px; width: 100%; }
display：flexおよびflex-wrap：親コンテナにラップし、子.form__itemはブロックごとに 1対1で整列しますが、コンテナが小さすぎる場合に子が1つジャンプするようにいくつかのルールを定義する必要があります別の下で。
.form__item内では、短いプロパティ表記-flex ：1 0 320pxを使用しました。これは、 flex-grow：1 、 flex-shrink：0 、 flex-basis：320pxとして分解できます。 flex-wrap：wrapを設定することにより、要素の幅が320pxで指定された幅より小さくならないことを決定し、 flexプロパティを指定しながら、要素が成長し、行の残りの空きスペースを占めるようにしました。
入力要素とラベル要素にも同じアプローチを使用しました。 合計フレックス値は320ピクセルになります。これは、コンテナサイズが小さくても適切に表示されることを意味します。
行った変更が何につながったのか見てみましょう。
はるかに良い！ ただし、これがこの問題を解決する唯一の方法ではなく、無数の数です。
クエリに一致するWeb要素
特定の要素に一致するクエリを使用するという考え方により、メディアクエリの機能をWeb要素レベルでエミュレートできます。これは、レスポンシブWebコンポーネントを作成するときに非常に便利です。 簡単に言えば、CSSに次のようなものを書く機会があったかどうかを想像してください。
.form__item[max-width~="30em"] { /* Styles here */ }
これは、このテクノロジーを使用してできることと非常に近いものです。 かなり有望ですね。
ただし、無限ループを回避するために、このテクノロジーはブラウザでネイティブに利用できません。 しかし、これらの目的のために、かなり興味深いプラグインがあります。
この例では、 Marc J Schmidtという名前の男性が作成したCSS要素クエリを使用しました。 このプラグインは、この問題に対するソリューションの非常に優れた実装です。 次の関連プロジェクトもあります。
本質的に、これらのプラグインはJavaScriptを使用してWeb要素の幅を決定し、それに対応する属性を追加することにより、CSSを使用して要素の新しい適切なスタイルを定義できます。
.form__item[max-width~="30em"] { float: none; width: 100%; }
これらのプラグインの1つとCSSコードのスニペットを組み合わせることで、flexboxを使用した場合と同じ結果が得られました。
属性
レスポンシブWebコンポーネントのコンシューマーに提供できる驚くべきことの1つは、この要素の属性APIです。 たとえば、このコンテキストでコンポーネントの寸法を定義するlayoutという属性を設定できます：「small」または「large」。 そして、次のように使用できます。
<subscribe-form layout="small"></subscribe-form>
したがって、追加のCSSプロパティを定義するフックを作成します。
Shadow DOM仕様では 、要素を含むコンテナはhostとして定義されています 。 例は次のようになります。
:host { display: block; } :host([layout = "small"]) .form__item { float: none; width: 100%; } :host([layout = "large"]) .form__item { display: table; float: left; width: 50%; }
これにより、複雑ではないJavaScriptを記述することで、提供したサイズを切り替える機会が消費者に与えられます。 これは、Webコンポーネント内に追加のJavaScriptコードを含める代わりに、開発者が現在のプロジェクトの要件に合わせてコンポーネントをカスタマイズする機会を残すことを意味します。
おわりに
上記のアプローチは、Webユーザーインターフェイスの作成に使用できますが、レスポンシブWebコンポーネントの作成には特に適しています。
Webコンポーネントをまだ使用していない場合は、使用することを強くお勧めします。 残念ながら、このテクノロジーのすべての機能は現在ChromeとOperaでのみ利用できますが、他のブラウザーメーカーは怠sittingではなく、このテクノロジーの広範なサポートはすぐそこにあります。