問題タブ [shadow-dom]

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

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

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

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

Chrome 開発ツールでできるように、Firefox で Shadow DOM 要素を検査する方法はありますか?

「Shadow DOM」という用語をロシア語に正しく翻訳したいと思います。しかし、「影」という言葉に最も適切な意味が何であるかはわかりません。そこで、さまざまな意味のリストを作成しました。最良のものを選択するのを手伝ってください。

• 日陰、幽霊、暗い、反射、織機
• ゴースト、スペクター、ファントム、アパリション、レイス
• 闇、暗がり、あいまいさ、夜、暗闇
• たそがれ、半暗闇、日陰
• ヒント、ほのめかし、言及、提案、暗示
• カバー、カバリング、ベール、コート、ブランケット
• 二次、過剰

コンポーネントにその子をレンダリングさせる方法を理解しようとしています。

だから私はコンパイルすることができます：

このようなものに：

Angular.Dart に ngTransclude のようなものはありますか?

カスタム要素をホストするカスタム要素があります。

今attached()（または他のコールバック）で、要素PolymerFlexLayoutのクラス属性を設定したいと思います。flex-nonvisual

Javascript では、コードは次のようになりますthis.parentNode.host.classList.add('someclass');

Dart in attached()(の呼び出し後super.attached())this.parentは null で、ホスト要素への他の参照が見つかりませんでした。

Dartでこれを行うにはどうすればよいですか?

• いくつかのポリマー カスタム要素を含む 2 つのパッケージがあります。
• 各パッケージは他のパッケージをインポートします
  • 一方のパッケージには、他方のパッケージの要素を使用または派生する要素が含まれています。
  • もう 1 つのパッケージは、インポートされたパッケージの要素をデモ ページで使用して、より魅力的なものにしています。
    要素間に循環依存関係はありません。
• 各パッケージには、各カスタム要素のデモ ページを含む「example」フォルダがあります。
• pubspec.yaml と pub build のトランスフォーマー構成を使用して、デモ ページの Javascript バージョンをビルドします。
  (pub build はエントリ ポイントのサンプル ディレクトリをまだサポートしていないため、サンプルを指すシンボリック リンク Web を作成しました。)
• pub build を実行すると、サンプルがビルドされ、いくつかは正常に動作します。
  ただし、トランスには制限があるため、すべてではありません。

トランスフォーマーを使用した pub ビルドは、トランスフォーマーが pubspec.yaml で構成されているインポートされたパッケージをサポートしていません。

したがって、私の新しいアプローチは、Dart web-ui グループで提案されたとおりでした

• 新しいパッケージを作成しました
• 新しいパッケージは、カスタム要素を含む 2 つのパッケージをインポートします。
• 2 つのカスタム要素パッケージのすべてのサンプル ファイルを、新しいパッケージの web/ および web/src ディレクトリにシンボリック リンクしました。

pub build を実行するとすべて問題ないように見えますが、デモ ページを開いてデバッグすると、どのカスタム要素のメソッドも呼び出されません(xxxChanged明示的に呼び出された場合を除く)。入力されたビュー attachedまたはready）。のような他の方法入力されたビュー attachedまたはready呼び出されます。

ファイル間の差分 (約 14k サイズ) はいくつかの小さな違いを示しましたが、ほとんど (約 98%) は同じです。この生成されたコード (縮小されていない) は、少なくとも私にとっては解読が容易ではなく、これらの違いを引き起こした可能性のあるヒントは見つかりませんでした。

その問題の原因は何ですか?

Web アプリケーションを書き始めたばかりで、Dart と Angular.dart を使用するのは楽しいだろうと思いました。Dart と Angular.js の両方を少し使用しましたが、気に入っています。

ただし、ほとんどのインターネット ユーザーがアプリケーションを実際に使用できるようにしたいのですが、Angular.dart (または少なくとも Angular.dart の一部) はシャドウ DOM に依存しているようです。私が知る限り、Chrome は Shadow DOM をサポートする唯一の主要なブラウザーであり、Firefox、IE、Safari がすべてそれを実装するとしても、今から何年もかかる可能性があります。

実際にAngular.dart のチュートリアルの3 章を dart2js コンパイラで実行してみたところ、できたページは Chrome では問題なく動作するように見えましたが、Firefox と IE11 では失敗しました。

ここでの私の評価は正確ですか？Angular.dart が Chrome 以外で使えるようになるまでには、少なくとも数年はかかるでしょうか? Angular.dart が Shadow DOM への依存に代わるものを許可する計画はありますか?

Angular.js (あまり楽しくない) と、Polymer.dart だけの Dart (それほどうまく/簡単に構造化されていない) のどちらかを選択せざるを得なくなるのではないかと心配しています。

Web コンポーネントに関する Rob Dodson の講演の後、彼はまったく新しい "cat"^^および "hat" ^CSS セレクターについて言及しました。カスタム要素の ShadowDOM だけでなく、ブラウザーのネイティブ要素にもスタイルを適用する可能性について尋ねました。要素の ShadowDOM?

ShadowDOM から要素をスタイルすることは可能ですか? どのブラウザで、どのように？私が見つけた唯一の関連記事は、「What the Heck is Shadow DOM? 」に関する Dimitry Glazkov によるものでした。-webkit-appearance: none;ここで、彼は疑似セレクターとルールを使用して ShadowDOM サブツリーに到達するようにレイアウトしています。

Chrome Canary (33.0.1712.3) のインポート、テンプレート、シャドウ DOM、およびカスタム要素を調査しています。グリッド レイアウトには、ファイルからインポートされたさまざまな Web コンポーネントまたは複製されたライト DOM フラグメントを表示する特定のコンテンツ要素 (ディスプレイの領域) があります。

ただし、シャドウ DOM を追加すると、シャドウ ルートを削除する方法がわからないため、通常の HTML DOM を再表示できません。一度作成されると、シャドウ ルートは残り、通常の DOM のレンダリングを妨げます。(Web コンポーネントの紹介、シャドウ DOM、テンプレート、HTML5 Rocks に関する Bidelman の記事など、さまざまな W3C 仕様を調べました) 以下の簡単な例で問題を切り分けました。

「普通の古いdivを表示」をクリックします。「影付きのテンプレートを表示」をクリックします。「普通の古いdivを表示」をクリックします。クリックするたびに devtools で検査します。3回目のクリックの後、ボタンの下とdevtoolsに出力がありません：

シャドウ ルートを削除し、コンテンツ要素を初期状態に完全にリセットするには、removeShadow() に何を追加する必要がありますか?

remove_shadows.html

私はこの例を持っています：

http://codepen.io/dbugger/pen/IuDxw

Shadow DOM 内に挿入ポイントがあり、そこにスタイルを適用しようとすると、それが消えてしまいます。しかし、画像はまだ表示されています。私は、Web コンポーネントから適切に理解していない原則があるのではないかと考えています。

誰かが私が間違っていることを説明できますか?