今週、Webコンポーネントの問題を実行しましょう。私たちはそれをしなければなりません。として スコット・ヴァンデヘイ 言う： HTML Webコンポーネントには時間があります。 Scottは、他の人の執筆のかなり健康的なシチューにリンクしています。そこでは、自分の作品でネイティブWebコンポーネントの有用性を想像できる独自のAH-HAの瞬間があります。
これも私に忍び寄ってきたので、私はそれを感じることができます。これがあなたをそこに連れて行くかもしれない考え方です：
- HTMLが少しあります
- あなたはそれにいくつかの機能を適用したいです
- したがって、Webコンポーネントにラップします
正直なところ、JQueryスタイルの思考と比較できると思います。 「何かを見つけて、何かをする」 – あなたがすでにそれを見つけたことを除いて、あなたはそれをする必要があります。
さて、私が還元主義者のように見える前に、Webコンポーネントはより複雑になる可能性があります。 Shadow DOMアプローチにオプトインすることができます。これにより、スロットやより複雑なテンプレートのロックが解除され、真のカプセル化などがあります。しかし、あなたはしません 持っている そのためには、必要に応じてレベルアップすることができます。まさに 基本 ユースケース（そして、これはWebが得意ではありませんか？！）は、有用で強力で、限られたボイラープレートを必要とし、ライブラリやビルドステップは必要ありません。
この例は、うーん、 かなりシンプルです、しかし、それは私の心が少しひっくり返った方法の例です。サイズを変更できるボックスを作りたかったのですが、それはちょうど9:16のアスペクト比であり、ピクセルの寸法を教えてくれます。 HTML、少しのCSS、およびJavaScriptが少し必要です。私はしません 必要 それをWebコンポーネントとして行うことは、これ以上の作業ではなく、意図を伝えるのに役立つ方法でHTMLとJavaScriptをより厳密に結合するのに役立ちます。
壮大な計画はありませんが、JavaScriptをインポートできるようにし、使用する意図したHTMLを文書化することで、どこにでもこれを簡単に再利用できるようになりました。私もおそらくCSSを束ねるべきですが、それは別の日の話です。
この「Webコンポーネントはかなりシンプルにすることができます」というトレイン全体を少し維持しましょう。実際、私はジム・ニールセンがウェブコンポーネントで最初のドミノを蹴ったのは最近、人々に違った考え方をさせていると思います アイコンギャラリーのWebサイトでWebコンポーネントを使用します。
アイコンのグリッドを想像してください。ジムは、aの形でページ上のコントロールを望んでいました サイズを制御するため。 Webコンポーネントを使用することにより、JavaScriptが実行されたときにのみその入力を挿入できます。これは理想的です。その後、その範囲のスライダーで聞くすべてのイベントは、すべてそのWebコンポーネントにバンドルされています。その間、WebコンポーネントのHTMLガットは、JavaScriptがない場合にレンダリングするものですが、アイコンの完全に保守可能なグリッドです。
これは、よりカプセル化されていると感じているため、これは素晴らしいアプローチです（JSファイルに多数の関数をつなぎ合わせることができます）。関連するロジックとDOMの操作はすべて「1つの屋根の下」です。さらに、プログレッシブエンハンスメントとして機能します。JSがロードに失敗した場合（またはユーザーが無効にしている場合）、アイコンのリスト（および
コンポーネントは次のように機能します). And if JS works, theコンポーネントはaのように機能します
Dave Rupert’s Web Component version of FitVids is even more straightforward. You probably have videos on your sites that are
YouTubeやVimeoのようなもの。ただ包むだけですそしてそれを一日と呼んでください。JavaScriptがロードされない場合、すべて良いビデオがまだあります。
もっと、どういうわけか、介してと言ってください
fetchリクエストなど、より多くのビデオがページに注入されます。これらの作業を行うためにJavaScriptを再コールする必要はありません。道connectedCallback彼らはただ働きます 彼らのことをしてください DOMに到着したときに自動的に。
私はのファンだと言います Webコンポーネントへの「Light Domのみ」アプローチ。しかし、Shadow Domを使用しないときにあきらめる比較的大きなものがいくつかあります。すなわち：スロット。スロットは、Webコンポーネントの「ガット」HTMLを採取するための非常に甘いメカニズムです スロッティング 適切に、おそらく数ビットのテンプレートHTMLになります。これは、フォールバックHTMLがよりシンプルになり、おそらくより適切になる可能性があることを意味します。
コリー・ラビスカ よく説明します、ここにいくつかあります 使用法：
Click me 
それは滑られます：
#shadow-rootどのように想像できますか
そこにそれがありますマッチングでname。そして、コンテンツの残りの部分はになります デフォルトスロット。Coryの記事は、実際には、この概念を拡張し、属性を搭載したように、必要な数のスロットでHTMLを構築することです。 それを読んで賢いです。
パラメーターといえば、それは一部のWebコンポーネントがとるアプローチです。何よりも ガッツ HTMLは、要素上の属性を介してコンポーネントに必要なことを言います。それはむしろJavaScript-Framework-Yの方法です。 この例はです
属性で完全に使用するもの：それは光や影のdomを処方しませんが、それはjavascriptを無効にしてもまったくレンダリングされないことを意味することを意味します。
ある種のサーバー側のレンダリングを見つけていない限り、これはピーナッツの別の袋である。
そのため、これまでのところ、すでに多くのオプションをカバーしてきました。
- 勇気 /いくつかのHTMLで提供されるすべてのHTMLが提供されます（おそらくフォールバックまたはスロット用に設計されています） / HTMLなし
- ライトDOM /シャドウDOM
- エレガントなフォールバック /いくつかのフォールバック /ノーフォールバック
- 属性がかった /属性ライト /属性なし
そして、もっとあります
- フレームワーク /フレームワークなしを使用します
- 怠zyな負荷 /熱心な負荷
- クライアント側のレンダリング /サーバー側のレンダリング（ビルドステップ経由）
- 外部スタイルシート /スタイルを介したスタイルjavascript / no stylesに焼き付けられています
リストは続く可能性があります。
ザック・レザーマンは、分類法を単純化しようとしました HTML WebコンポーネントとJavaScript Webコンポーネント。ここで複雑さを打ち破ろうとするのは賢明だと思いますが、それはあまりにも遠すぎると思います。誰かがおそらく、中間の分類法を描く決定ツリーを作ることができます。
Views: 0
