問題タブ [custom-element]

私は最近ポリマーの学習を開始し、iron-ajax iron-list とテンプレートを一緒に使用しようとしています。何らかの理由で値が画面に空白で表示されますが、カードが作成されています。この質問から例を挙げて、2 つのポリマー要素の検索リストと検索カードを作成しました。カードを検索してデータを表示し、リストを検索してデータを取得し、リストにカードを入力します。検索リストは次のとおりです。

検索カードは次のとおりです。

項目データを構成するすべてのスパン フィールドが空白で表示されます。私は何を間違っていますか？それを修正する方法?

カスタム要素を動的にロードすることは可能ですか?

私のviewModelが次のようになっているとしましょう：

aurelia が私の「カード」をレンダリングしないのはなぜですか。同様の動作を実現する方法はありますか?

これらのカードを直接追加するとHTMLうまくいきますが、よりモジュール化されたアプローチが必要です。

ありがとう

というカスタム要素がありx-fooます。x-bar私はそれを拡張し、要素を作成したいと思います:

しかし、うまくいきません。この方法でカスタム要素を拡張することはできません。Chrome では次のエラーが発生します。

Uncaught NotSupportedError: 「ドキュメント」で「registerElement」を実行できませんでした: タイプ「x-foo-extended」の登録に失敗しました。「extends」で指定するタグ名はカスタム要素名です。代わりに継承を使用してください。

代わりに継承を使用しますか? わかりました、正確にはどうですか？例はありますか？

注: 私はポリマーを使用していません。ポリフィルのない、Chrome の単純なバニラ Web コンポーネント。

l20n が標準の HTML 要素のデフォルト属性にのみ適用されるという問題が発生しています。

私の場合、JSON 形式で翻訳を処理しようとしています。私のダミーデータは次のとおりです。

私のテスト HMTL は次のとおりです。

ただし、ブラウザは次の HTML を生成します。

属性の順序と属性名のさまざまな組み合わせを試してみましたが、l20n によってローカライズされているのは、各要素タイプに適切なデフォルトの HTML 属性だけのようです。

この問題は、"title" などの標準 HTML 属性がカスタム要素内で使用されている場合にも明らかですが、l20n は標準要素の標準属性が<content>カスタム要素のタグ内に配置されている場合に処理できます。

属性の処理に関する l20n のドキュメントはあまり広範ではないようです。これまでのところ、Stack Overflow や Google で回答を検索しても無駄であることが判明しており、Mozilla は独自のディスカッション リストとバグ トラッカーをホストしており、一般の人にはあまりアクセスできないようです。

l20n プロジェクトは流動的な状態にあるようで、私が使用しているバージョン (3.0.5) の ES5 と互換性があると思われる webcompat/l20n.js は、Array.from(); の使用のために Polyfill を必要とします。さらに、例と学習リソースは、フレームワークの使用方法と完全に一致していないようです。ソース コードは完全に文書化されていませんが、それにもかかわらず、フレームワークについて私がこれまでに得た理解のほとんどは、そこを見ることで得られました。コード内に属性名のフィルタリングが見られないため、この問題は、l20n がデータ属性をパスする前に、要素 (およびその属性) をブラウザーに登録する必要があることが原因であると思われます。

助けていただける方、よろしくお願いします。