カスタム要素が非常に新しいテクノロジーであることは理解しています。

次のコードは、Webkit ブラウザーと Firefox (でdom.webcomponents.enabled) で異なるものを表示します。

理解できません: AJAX で読み込まれたカスタム要素を追加すると、Webkit ブラウザーでカスタム要素ではなく HTMLUnknownElement が作成されるのはなぜですか? これはバグですか？Chrome は、カスタム要素を完全にサポートしていると言っています。代わりに、Firefox はフラグの背後でサポートしています。

これはindex.html次のとおりです。

これはloaded.xml次のとおりです。

出力は次のとおりです: (Chrome。Firefox には他の出力があります)

Aurelia アプリでカスタム要素を使用しています。ビューモデルのデータをカスタム要素にバインドすると、正常に機能します。カスタム要素コントロールのデータに変更を加えても、双方向のデータ バインディングのおかげで、ビュー モデルのデータにも変更が反映されます。

ただし、(javascript を使用して) ビュー モデルからのデータに変更を加えると、データはカスタム要素で更新されません。より単純な設定でこの問題を再現しました。

単純なビュー モデル

シンプルビュー

Verify Changeテキストボックスの値を変更した後にクリックするたびに、変更された値がアラートに表示されます。しかし、Update Prop1ボタンをクリックするとprop1値が更新されますが、変更がビューに反映されません。何が欠けているのか正確にはわかりません。

注:を使用する代わりに、 を使用する$parent.testObj['prop1']と$parent.testObj.prop1、データバインディングが正常に機能します。$parent.testObj['prop1']ただし、私の実際のカスタム要素は一般的な種類のものであり、プロパティ名は事前にわかっていないため、ドット表記の代わりに表記を使用し続ける必要があるようです: $parent.testObj.prop1.

ポインター/提案​​/フィードバックをお待ちしております。

更新: aurelia データ バインディングに関するドット表記とインデクサー表記の違いを誰かが指摘できれば(私は既にこれを確認しました)、それは非常に役立ちます。

単純なカスタム要素を作成していますが、別のファイルからインポートしたいと考えています。同じファイルにある場合tは正しいhtml要素を与えていますが、外部ファイルにある場合はundefined. これが私のindex.htmlファイルです：

そしてexample-container.html：

t私の別のアプローチは、次のようにグローバル スコープで定義することでした。

それはうまくいきますが、グローバルスコープにゴミを残したくありません。

spring-ws を使用して Web サービスをヒットしようとしていますが、Web サービス プロデューサーは SOAP ヘッダーにカスタム要素を必要とします。私は Web サービスに非常に慣れていないため、soap ヘッダーに値を挿入しようとして問題が発生しています。私は XMLBeans を使用して xsd から Java に変換し、マーシャリングとアンマーシャリングも行っています。xmlbean ドキュメントを構築し、カスタム ヘッダー要素のすべての値を設定しました。ドキュメントを取得するか、そのドキュメントに添付された要素だけを取得して SOAP ヘッダーに挿入する必要があります。以下にリストされているのは、soapui の wsdl (ヘッダーのみ) です (以前に学習して初期テストを行ったもの)。

コード

次の Polymer カスタム要素を考えてみましょう。

このカスタム要素を index.html で次のように使用します。

質問

valueプロパティを双方向バインディング ( notify: true)として宣言したと思います。しかし、入力をクリックして何らかのテキスト (たとえば、"foo") を入力しても、モデルには反映されません (つまり、document.querySelector('test-element').valueindex.html で設定した値を への呼び出しが返します"test")。興味深いことにvalue、入力の属性は正しく変更されますが、テスト要素の値プロパティは変更されません。私は何が欠けていますか？

document.querySelector('test-element').setAttribute('value', 'bar')への呼び出しが適切に機能することにも注意してください。

自動バインディング テンプレートを成功させようとしています。これは私がこれまで行ってきたことです。ページは "greeting" の値でレンダリングされません。{{挨拶}}を出力します。

app.js

Polymer 0.5.5 で動作しますhttp://plnkr.co/edit/fmL9xQEXKwnINzdL3rBj?p=preview

グローバル スコープのアニメーションが ShadowDOM で機能するかどうかを明確にしたかったのです。
つまり、ShadowDOM にまたがるクラスがありますが、そこからのアニメーションは ShadowDOM の下の要素では機能しません。
要素のすぐ下にアニメーションを追加すると、すべて正常に動作するようです。

動作: http://jsbin.com/doqotexuzi/edit?html,output
動作 しません: http://jsbin.com/rutojemoli/edit?html,output
(例では、ネイティブの ShadowDOM サポートが必要です。Chromium で動作します)

Aurelia のカスタム要素機能をいじって、「プログレス バー」要素を作成しようとしました。

プログレスバー.js

プログレスバー.html

test.html（該当部分）

これはすべて正常に表示されます。しかし、メインページで関数を呼び出したり、要素の属性を変更したりできるようにする方法に苦労しています。これにより、プログレスバー自体で何かを行う必要があります。

progress-bar.js 内に関数「doSomething」を作成しようとしましたが、test.js でアクセスできません。

progress-bar.js に追加

test.js内

次に、progress-bar 要素内にカスタム属性を設定しようとしましたが、代わりに valueChange を使用して div を変更しました。

progress-bar.js の内部

test.js

そこには問題ありません、ほとんどそこにあります。しかし、属性が変更されたときに呼び出すハンドラーを設定するにはどうすればよいでしょうか?

この構文を持つチュートリアルを見つけました：

しかし、progress-bar.js でそのコードを使用できないようです。追加した後、ページが正しくレンダリングされません。Gulp はエラー メッセージを返していないようですが、ブラウザー コンソールは次のエラーを返します。

ERROR [app-router] Router navigation failed, and no previous location could be restored.

これは、ページのどこかに構文エラーがある場合に通常受け取るメッセージです。

ここでわからないことがたくさんあります：

これはカスタム要素の正しい使い方ですか? 内部に関数を含むカスタム要素を作成できますか? 値が変更されたときにイベントをトリガーできるカスタム属性を持つカスタム要素を作成できますか?

さまざまなことを試しているときに非常に多くのバリエーションがあるため、コード全体を掲載していないことをお詫びします。