1

Shadow DOM と Web Components のすべてについてかなり迷っていますので、ご容赦ください...

Shadow DOM のアイデアは、アプリ内のすべてのデータを、API が従来の DOM とまったく同じように機能するデータ構造内に置くことだと思います。正しい？

その目的は、データのシャッキング、データの処理、データのファイリングとクエリを、ほとんどの人にとって簡単にすることであり、事実上標準的な方法を提供することです。これは、たまたま誰もが暗記している API を使用するためです。正しい？

もしそうなら、今すぐこのやり方で足を濡らし始めることができる方法（ライブラリ？）はありますか？

4

2 に答える 2

3

さらに、W3Cの件名でこれを見つけました。

  • ドキュメント ツリーは、ルート ノードがドキュメントであるノード ツリー [DOM] です。
  • どの要素も、シャドウ ツリーと呼ばれる 0 個または 1 個の関連付けられたノード ツリーをホストできます。
  • シャドウ ルートは、シャドウ ツリーのルート ノードです。
  • コンポーネント ツリーは、ドキュメント ツリーまたはシャドウ ツリーのいずれかです。

したがって、私が今示したことに基づいて、私が見つけた最良の説明は、What the Heck is Shadow DOM?からのこれです。下に示された：

Shadow DOM は、DOM 要素のサブツリーをドキュメントのレンダリングに含めるが、メイン ドキュメントの DOM ツリーには含めないブラウザの機能を指します。

重要な使用例は、Web ページ上のビデオ コントロールです。マークアップには、一部の属性とソース タグを含むビデオ タグのみが表示されます。すべての動画操作を機能させるための追加コードは、Shadow DOM に隠され、ページの残りの部分では使用できません。タグの実際のマークアップ、JavaScript、およびスタイル<video>はカプセル化されているため、各ブラウザー ベンダーが既に記述しているビデオ コントロールの実装の詳細が隠されています。

したがって、DOM にある間は、それをレンダリングするページから隠されます。したがって、Shadow DOM を表示するには、Chrome の Dev Tools で有効にすることができます。 ここに画像の説明を入力

次に、次のように表示できます。 ここに画像の説明を入力

簡単に言えば、Shadow DOM は Web コンポーネントを構成する 4 つのテクノロジの 1 つです。これは、一般的な Web コンポーネントとの関係です。

定義としては、Web コンポーネントは次のとおりです。標準化されたビルディング ブロックから Web サイトを構築できるようにする W3C のコンポーネント プラットフォーム。Web コンポーネントは、カスタム要素、Shadow DOM、および HTML インポートとテンプレートで構成されます。

したがって、Shadow DOM は Web コンポーネントのテクノロジーですが、Web コンポーネントに関する MDN のページを参照してください。これらの 4 つのテクノロジーで構成されています (ただし、それぞれを個別に使用することもできます)。

  1. カスタム要素: 独自のカスタム HTML タグおよび要素を作成する機能です。独自のスクリプト化された動作と CSS スタイルを持つことができます。これらは Web コンポーネントの一部ですが、単独で使用することもできます。

  2. HTML テンプレート: HTML テンプレート要素<template>は、ページの読み込み時にレンダリングされないが、その後 JavaScript を使用して実行時にインスタンス化されるクライアント側のコンテンツを保持するためのメカニズムです。テンプレートは、後でドキュメントで使用するために保存されるコンテンツの断片と考えてください。

  3. Shadow DOM : JavaScript、CSS、および Web コンポーネントのテンプレートのカプセル化を提供します。Shadow DOM は、これらがメイン ドキュメントの DOM から分離されたままになるようにします。Web コンポーネントの外部で、Shadow DOM を単独で使用することもできます。

  4. HTML インポート: Web コンポーネントのパッケージ化メカニズムを意図していますが、HTML インポートを単独で使用することもできます。<link>HTML ドキュメントでタグを使用して、HTML ファイルをインポートします。

以下に、3 つの Web コンポーネント ライブラリを示します。

  • ポリマー (4 つのテクノロジーすべてを使用)、
  • X-Tag (カスタム要素のみを使用)、
  • および Bosonic (低レベルの UI 要素のライブラリと呼ばれるカスタム要素のみを使用します)。

また、興味深いと思われる次のサイトも見つけました: Web Components.org Web コンポーネントのベスト プラクティスについて議論し進化させる場所

于 2016-03-17T00:16:33.097 に答える
2

これは間違いなく Web コンポーネントの目的の 1 つ (カプセル化された再利用可能な DOM 要素でアプリ全体をラップすること) であり、その方法でのみ使用することは完全に正当化されます。ただし、理想的な使用法は、アプリに至るまで拡張することです。再利用可能な「ウィジェット」にすることが考えられるアプリのあらゆる部分も、Shadow DOM カプセル化の恩恵を受けることができます。コンポーネント間に特定の境界と明確に定義された API がある 50 人のチームによって開発されたアプリを想像してみてください。現在、このサイズに近いほとんどの Web アプリに見られる CSS の衝突、読みにくいコード、密結合はほとんどありません。

これらの最先端技術を現在使用している限り、GoogleのオープンソースのPolymer Projectをチェックしてください。これには、Web コンポーネントとすべての関連技術を最新のすべてのブラウザーにもたらす一連のポリフィルと、このような作業をより楽しくする構文シュガーリングが含まれています。

于 2013-10-21T22:59:40.387 に答える