問題タブ [web-component]

私は現在、angularjs プロジェクトに取り組んでおり、再利用可能なコンポーネントを構築しようとしています。

コンポーネントに含めたい画像/スタイルシートをどのようにパッケージ化すればよいのでしょうか?

私が欲しいもの：

• サススタイル
• コンポーネントディレクトリ内に画像を保存する場所と、スタイルシートでそれらを参照する方法
• コンポーネントを使用してアプリケーションでオーバーライド可能なスタイル

現在、私の考えは次のとおりです。

bower components ディレクトリ ( app/public/components) にコンポーネントを作成します。

application.scss は、次のようなコンポーネントのスタイルをインポートします

よくわからない点:

• 画像を参照するにはどうすればよいですか? アプリケーション開発者のパスが変更された場合はどうなりますか? コンポーネントでそのパスの sass 変数を作成しますか?
• アプリケーションで sass ファイルの変数をオーバーライドするにはどうすればよいですか? アプリケーション開発者にそれをしてもらいたいですか? sass で変数をオーバーライドすると、変更された場所から下方に伝播するように見えるため、アプリケーションはそれ自体でしか変更できません。
• インポート時に sass ファイルへのパスを渡すことはできますか?

私の使用例は angularjs に固​​有のものですが、同じ問題がW3C web componentsや、 polymerやmozilla brickなどのライブラリにも当てはまると確信しています。

何か案は？

編集：viewsフォルダはと同じレベルですassets

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

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

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

使用中の私の要素:

私のポリマー要素では：

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

ダーツ環境でポリマーを使い始めました。「GWT cell table」や「GWT RichTextArea」などの要素を作成したいと思います。

ポリマー要素では、このようなウィジェットが見つかりません。

これらを手動で実装する必要がありますか、それともこのようなウィジェット用の他の (より高い?) ライブラリですか?

ありがとうございます

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

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

私は最近 Ember.js を使い始め、Web コンポーネントについて紹介されました。以前に jQuery UI ウィジェットを使用したことがありますが、それらは同じように見えます。Web コンポーネントとウィジェットに違いはありますか、それともほぼ同じですか?

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