問題タブ [custom-element]

バニラ JavaScript (フレームワークなし) で実装された HTML5 Web コンポーネント (HTML インポート、シャドウ DOM、テンプレート、およびカスタム HTML 要素) を使用して Web アプリケーションを設計しています。Web アプリケーションはかなりシンプルで、単一ページのアプリケーションとして実装する必要があります。アプリケーションの要件の一部は、ユーザー インターフェイスがカスタマイズ可能であることです。

設計アプローチ

この例では、<application-navigation>カスタム要素を使用しています。new CustomEvent('application-navigation', {location:'/sign-in'})この要素は、カスタム イベント (例: ) およびメソッド呼び出し (例: ) を介して、「トップレベル」の JavaScript (JavaScript MV* 用語の「ルーター」など) と通信しますdocument.querySelector('application-navigation').enableSignOut()。本質的に、カスタム イベントとメソッドは要素の「パブリック API」を形成します。

別の HTML インポートを使用して、カスタマイズさ<application-navigation>れた要素をアプリケーションに含めることができます。たとえば、<link rel="import" href="default/application-navigation.html"/>またはを使用し<link rel="import" href="my_cool_theme/application-navigation.html"/>ます。HTML インポートが同じメソッドを持ち、同じカスタム イベントを生成する限り、どのユーザー インターフェイスのカスタマイズが使用されているかに関係なく、アプリケーションは同じように機能するはずです。

この設計の主な利点は、非常にカスタマイズ可能なユーザー インターフェイスを許可することで要件を満たすことです。内部 JavaScript イベント、CSS、および (シャドウ) DOM 構造は、テンプレート間で完全に異なる場合があります。また、必要に応じて既存のライブラリを再利用することもできます。たとえば、デフォルト<application-navigation>要素は Twitter Bootstrap のドロップダウン HTML マークアップを使用でき、テーマ バージョンは Foundation ライブラリを使用できます。

ただし、このコンポーネントはあまり一般的ではありません。たとえば、<application-dropdown>要素とは異なり（ただし、<application-navigation>要素は（カスタマイズ可能な）<application-dropdown>要素を利用できます）、かなり特定の目的（ナビゲーション要求を制御する）を果たします。

質問を言い換える

私の質問は、特定の目的、より一般的な目的を満たすためにカスタム要素を作成する必要がありますか、それとも目的の幅は無関係ですか?

カスタム ポリマー要素の次の使用法を検討してください。

ここでは、カスタム要素に 2 つの変数をバインドしますapp-header。ここで、値を更新したい場合は、次のようにすると思います ( app-header! の親で)。

ただし、これはappTitlenotのみを更新しますabc.def.ghi。この値も更新するには、次のようにする必要があります。

これがなぜなのかわかる方いたら教えてください!!

とにかく、せっかくだから使ってみたいImmutable！ただし、これにより、データがカスタム要素にバインドされる方法にいくつかの問題が発生します

スニペットの例を次に示します。

したがって、データを要素にバインドするときに問題が発生します。

このようなことは可能ですか、それとも何か他のことを完全に間違っていますか?

最近、Microsoftは、カスタム要素を作成するために新しいX-Tagライブラリを開始しました。ウェブサイトによると、

X-Tag は、Microsoft がサポートするオープン ソースの JavaScript ライブラリであり、W3C 標準 Web コンポーネント ファミリの API をラップして、コンポーネントを迅速に開発するためのコンパクトで機能豊富なインターフェイスを提供します。X-Tag は、すべての Web コンポーネント API (カスタム要素、Shadow DOM、テンプレート、および HTML インポート) の機能フックを提供しますが、操作にはカスタム要素のサポートのみが必要です。カスタム要素がネイティブにサポートされていない場合、X-Tag は Google の Polymer フレームワークと共有される一連のポリフィルを使用します。ビルドセクションでパッケージオプションを確認できます

私が覚えている限りでは、少し前までは、Mozillaでさえまったく同じ名前のX-Tagという同様のプロジェクトを持っていました。

これらのプロジェクトは互いにどのように異なっていますか? それとも、ブランディングを一新した同じプロジェクトですか？

Web コンポーネントで要素を登録するには、次のように入力するだけです。

要素を作成するには、次のいずれかを実行できます。

これはすべてうまくてダンディです。問題は、既存の要素の拡張について話しているときに始まります。

質問 1 : なぜ重複するのですか? ここでは、'button'十分なはずです (特に、要素のプロトタイプを簡単に作成できるため)Object.getPrototypeOf(document.createElement(tag));

質問 2 : その情報は社内でどのように使用されていますか? prototype: Object.create(HTMLFormElement.prototypeたとえばandがある場合はどうなりますextends: 'button'か (その後extendsが渡されたプロトタイプと一致しない場合)

作成するには、次のいずれかを実行できます。

質問 3x-foo-button : extendsは明らかなのにbutton、なぜ、を使用するときに両方を指定する必要があるのdocument.createElement()ですか? document.createElement()これは、単に構文でタグを作成するためだと思われます<button is="x-foo-button"></button>。これにより、次の質問が発生します。

質問 4is :構文のポイントは何ですか? これを行うことの実際の違いは何ですか:

この：

1) 以外: 最初の構文は<button is="x-foo-button"></button>、ドキュメント内にインスタンスを作成する必要があります。2) 2 番目の構文は、カスタム要素の拡張だけでなく、任意の要素で使用できますか?

is:"ajax-pop"x-tag を使用して、属性を配置したすべての html 要素を拡張する方法を見つけようとしています。

私がやりたいのは、 is:"ajax-pop" 属性を持つ要素をクリックすると、いくつかの動的 ajax ロードを実行することです。管理しやすいシステムを開発するための良い出発点になるでしょう。

私はいくつかの異なる方法でそれを行うことができることを知っていますが、このように拡張する方法があるのではないかと思っています:「すべてのネイティブhtml要素」