問題タブ [shadow-dom]

DOM から Polymer カスタム要素の属性にアクセスする方法、または Polymer.register から DOM にデータを送信する方法を探しています。

以下のこの非常に単純な要素は、2 つの値を取り、それらを乗算して、結果をそのresult属性に配置します。

外部からこの結果にアクセスするにはどうすればよいですか?

というわけで、「shadow DOM」という言葉をよく耳にするようになりました。それは切り離された DOM 要素と同じですか?

次のようなDOM要素を作成すると:

$pizza は切り離されています。attach、appendまたはhtmlおそらくを使用して取り付けることができます。

これは機能的にはシャドウ DOM の概念と同じですが、他にいくつか注意点がありますか? 違いは何ですか？

私は常に、Shadow DOM 要素のスタイリングにアクセスしてオーバーライドできると信じていました。使用できる Webkit 固有のセレクターを定義する html5rocks に関する記事を見ました: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

ただし、これを試してみると、期待どおりに機能しません。スタイル プロパティの一部をオーバーライドできないように見えます。例: 高さと幅 ただし、Webkit の外観を設定すると、ボタンのように見えなくなります。

これは本当ですか？

私がやりたいことは、ハンドルとトラックが異なる色になるようにレンジ スライダーのスタイルを設定することです。

ここに簡単なデモがあります: http://jsfiddle.net/sidonaldson/dCK​​d3 /ボタンを非表示にすることはできますが、背景色を設定すると元に戻ります!

私は現在、現在の Dart Web UI プロジェクトを Polymer.dart に変換する作業を行っています。フロントエンドのスタイリングと多くの Web アニメーション (ドロップダウン メニュー、モーダル、ツールチップなど) には Bootstrap 3 を使用します。

しかし、1 つの Web UI コンポーネントを Polymer に変換した後、サブ コンポーネントが ShadowDOM にカプセル化されたため、すべての Bootstrap JavaScript がサブ コンポーネントに対して機能しなくなりました。Dart から ShadowDOM の要素にアクセスするには、shadowRoot フィールドを使用する必要があり、Chrome の JavaScript からは webkitShadowRoot プロパティを使用する必要がありますが、それでも単一のドロップダウン メニューを正しく動作させることはできません。

まず、ブートストラップで dropdown('toggle') API を呼び出した後、ドロップダウン メニューが表示されますが、消えることはありません。また、イベントはウィンドウ レベルで発生するため、クリック イベントによってトリガーされたリンクを検出することは不可能のようです。これは、表示するドロップダウン メニューが見つからないことを意味します。

twitter-bootstrap と Polymer を一緒に使った経験のある人はいますか?

新しい Shadow Dom と古い HTML iframe 要素以外に、ユーザーがウィジェット内の DOM 要素で[委任された]イベントをリッスンするのを防ぐ方法はありますか?

PS Firefox には、Shadow DOM に似た機能を持つ XBL があると聞きました。現在サポートされていますか?

何が起こっているのかわかりませんが、要素の場所によっては < content> タグ内のコンテンツがレンダリングされていません。

使用中の私の要素:

私のポリマー要素では：

それが機能しない理由はないようです。私はこれに何時間も費やしてきました。それが何であるかわからない。誰でも私を正しい方向に向けることができますか？どんな助けでも大歓迎です。