問題タブ [shadow-dom]

親要素にリスナーを自動的に追加するコンテキストメニュー要素を作成したいと思いますcontextmenu（親が右クリックされたときに展開できるようにします）。this.parentNode要素が通常の DOM 階層にあるときに調べることで、なんとかそれを行うことができました。しかし、Shadow DOM の内部では、がthis.parentNodeポイントされ#document-fragment、そのバリアを突き破る方法はないようです。私がここに欠けているものはありますか？

ポリマーにangularjsディレクティブのtransclude属性のようなものはありますか? テンプレートの特定の場所にいくつかの要素を含めることができるのは何ですか?

次のようなことを達成したいと思います。

これは次のように表現できます。

これがポリマーのタスクなのか、それともポリマーを使用する典型的な方法なのかはわかりません。私はポリマーが好きになり始めたので、私は慣用的な考え方を続けたいと思っています.

Polymerで作成されたカスタム要素があります。これを x-input と呼びましょう。次のようになります。

そして、私はAngularを使用するこのhtmlを持っています:

JS は次のとおりです。

問題は、双方向のデータバインディングにあります。入力値を変更すると#outer_input、x-input 内部値 (名前と年齢) が変更されます。

しかし、カスタム要素の入力を変更すると、内側のバインドされた変数のみが変更されます。

ポリマー要素内のバインドされた変数の値を変更するにはどうすればよいですか?それにより、モデルとすべての外部バインドされた UI およびデータが変更されます (双方向バインディング)。

ありがとう

現在の Web コンポーネント仕様を使用してリストボックス ウィジェットを実装したいと考えています。さらに、結果のリストボックスは ARIA 標準に準拠する必要があります。リストボックス ウィジェットのインスタンス化は次のように簡単です。

クリーンさとカプセル化のために、他のすべてはシャドウ DOM でレンダリングする必要があります。このウィジェットを実装するために、2 つのカスタム要素が登録されています<x-listbox>。<x-option>のシャドウ DOM の最上位要素は、<x-listbox>アクセシビリティのためのおよび属性<div>を運ぶです (実装の詳細であるため、要素にこれらの属性は必要ありません)。role=listboxaria-activedescendent<x-listbox>

が機能するaria-activedescendentには、オプション要素に ID が必要です。要素に ID を直接配置する<x-option>ことは、次の 2 つの理由からうまくいきません。まず、リストボックス ウィジェットを使用するドキュメントの ID 名前空間を汚染します。第 2 に、さらに重要なことは、ID は Shadow 境界を越えて機能しない (これは Shadow DOM の目的の 1 つです)。そのため、オプションの ID は<div>witharia-activedescendent属性と同じ Shadow DOM に存在する必要があります。

これに対する解決策は<x-option>、シャドウ DOM 内のコンテンツとしてレンダリングされるそれぞれ<x-listbox>を別の<div>(そのシャドウ DOM に属する) で囲み、ID を配置できるようにすることです。

私の質問は次のとおりです:これは正しい方法ですか?カスタム要素とシャドウ DOM Web API を使用してこれを実装する方法は?

タイトルで述べたように、挿入ポイントの属性で:notセレクターを機能させることができません。select

ここに示されているようにhttp://jsbin.com/lusof/1/edit：

• 構文は querySelector で機能します
• notセレクターで選択されていない場合、同様のノードにアクセスできます

明らかな何かを見逃しましたか？

回答ありがとうございます

これまでいくつかの Polymer コンポーネントを作成してきましたが、より複雑なものについては、それらのスタイルがページの残りの部分からどのように分離されているかが気に入っています。複数のアプリでそれらを使用することがはるかに簡単になりました。

しかし、今日、私は非常にシンプルなコンポーネントを作成していて、ページのスタイルをブリードインしたいことに気付きました。一連のロジックをパッケージ化するコンポーネントを持っていますが、基本的なものをレンダリングするだけです。<a href>リンク。CSS またはその他の手段を使用して、そのリンクがページの残りのスタイルからスタイルを継承することは可能ですか?