X-TAGでカスタムWebコンポーネントを構築します-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

X-TAGでカスタムWebコンポーネントを構築します

Christopher Nolan

Feb 23, 2025 am 08:26 AM

Building Custom Web Components with X-Tag

X-TAGでカスタムWebコンポーネントを構築します

キーテイクアウト

X-Tagは、主にカスタム要素APIに焦点を当てた、迅速なWebコンポーネント開発のためのコンパクトで機能が豊富なインターフェイスを提供します。
X-TAGでカスタム要素を作成することは、XTAG.register（）メソッドを使用して、完全にJavaScript駆動型です。このプロセスでは、カスタム要素のライフサイクル、アクセサ、メソッド、およびイベントを定義することが含まれます。

言い換えれば、X-TAGはMicrosoftに、Googleにとって何をポリマーとするかです。両方に共通する唯一のことは、サポートしていないブラウザのWebコンポーネントのサポートを可能にする基礎となるポリフィルです。

X-Tagはポリマーとどのように異なりますか？

ポリマーは、4つのWebコンポーネントテクノロジーすべて、つまりHTMLインポート、カスタム要素、Shadow Dom、およびHTMLテンプレートを単一のパッケージに組み合わせています。開発者に、カスタムWebコンポーネントを構築するための使いやすいAPIを提供します。一方、X-TAGは、カスタムWebコンポーネントを構築するためのカスタム要素APIのみを提供します。もちろん、X-TAGライブラリと組み合わせて他のWebコンポーネントAPIを使用することもできます。
X-Tag、Mozillaプロジェクトではありませんか？

はい、そうでしたが、今はもうありません。掘り出した後、X-TAGプロジェクトの元の開発者であるDaniel Buchnerが、彼が図書館を作成したときにMozillaで働いていたことを知ることができました。しかし、それ以来、彼はマイクロソフトに移り、プロジェクトを続けました。さらに、彼は元モジリアンの助けを借りて、図書館への唯一の貢献者でした。したがって、それは現在、元モジリアンによって設立されたマイクロソフト支援プロジェクトです。

x-tag

を開始しますこの記事では、X-Tagライブラリを使用してカスタム要素を構築して、次のマークアップを使用してGoogleマップストリートビューを埋め込みます。

カスタム要素には、場所の座標を指定するために、緯度と経度の2つの属性があります。これらの属性はオプションであるため、開発者がマークアップで定義できない場合に備えて、それぞれにデフォルト値を割り当てます。

<span><span><span><google-map> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></google-map></span><span><span></span></span></span></span>

> X-Tag JavaScriptライブラリをドキュメントのに含めることから始めましょう。

ドキュメントの

にx-tagライブラリを含めることが重要です。これは、レンダリングエンジンが。カスタム要素の定義

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script> src<span >="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script>></script></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

ポリマーとは異なり、X-TAGを使用してカスタム要素を作成するプロセスは完全にJavaScript駆動型です。 X-TAGライブラリは、要素のカスタム動作を定義するための便利な方法、コールバック、およびプロパティを提供します。 X-TAGでカスタム要素を作成するための典型的なスケルトンは、次のようになります。

Register（） - これはライブラリで最も重要な方法です。カスタム要素の名前を最初の引数として受け入れ、その後にオブジェクト定義が続きます。名前が示すように、これはDOMにカスタム要素を登録する責任があります。

コンテンツ - 非常に頻繁に、カスタム要素には構造またはプレゼンテーションに追加のマークアップが必要になる場合があります。これは、HTML文字列またはマルチラインコメント文字列を受け入れて、マークアップをDOMに挿入します。

ライフサイクル - これには、カスタム要素のライフサイクルのさまざまな段階をターゲットにするように設計された便利なコールバックメソッドが含まれています。

アクセサーズ - これは、オブジェクト属性、セッター、およびゲッターにアクセスするための一般的なインターフェイスを提供し、対応するHTML属性にリンクします。属性がゲッター/セッターにリンクされている場合、それらの状態は常に同期し続けます。

xtag<span>.register('google-map', {
</span>
  <span>content: '',
</span>
  <span>lifecycle: {
</span>    <span>created  : function(){ 
</span>      <span>/* Called when the custom element is created */ 
</span>    <span>},
</span>    <span>inserted : function(){ 
</span>      <span>/* Called when the custom element is inserted into the DOM */ 
</span>    <span>},
</span>    <span>removed  : function(){ 
</span>      <span>/* Called when the custom element is removed from the DOM */ 
</span>    <span>},
</span>    <span>attributeChanged: function(attrName<span>, oldValue, newValue</span>){
</span>      <span>/* Called when the attribute of the custom element is changed */
</span>    <span>}
</span>  <span>},
</span>
  <span>accessors : {},
</span>  <span>methods   : {},
</span>  <span>events    : {}
</span><span>});</span>

メソッド - カスタム要素には、目的の機能を提供するために、独自の独自の方法の一部が必要になる可能性があります。メソッドオブジェクトをトップレベルのxtag.register（）定義オブジェクトに追加し、その中にすべてのユーザー定義のメソッドを含めるだけです。

基本的なアイデアは、IFRAMEを使用してGoogleマップを埋め込み、次の形式でSRC URLを指定することです。
API_KEYを取得するには、ここで説明する手順に従ってください。 API_KEYを作成したら、ライフサイクルオブジェクトの作成されたコールバックメソッド内にIFRAMEを作成し、上記の形式でSRCプロパティを指定します。
```
<google-map> latitude="40.7553231" longitude="-73.9752458"></google-map>>
```
上記のコードは機能しますが、iframe.srcのハードコード化された座標値を取り除き、代わりにカスタム要素属性から値を直接調整する必要があります。これを行うには、属性名がキーを形成するアクセサーズオブジェクトを使用します。属性を宣言することにより、それらをHTML属性にリンクします：{}。
```

>
 >
 
 <script> src="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</script>>>
 >
 >
 
 
 <script>></script>
 
 >
 >
>
```
SRC URLを指定しながら、これらの変数を直接使用できます。
```
xtag.register('google-map', {

 content: '',

 lifecycle: {
 created : function(){ 
 /* Called when the custom element is created */ 
 },
 inserted : function(){ 
 /* Called when the custom element is inserted into the DOM */ 
 },
 removed : function(){ 
 /* Called when the custom element is removed from the DOM */ 
 },
 attributeChanged: function(attrName, oldValue, newValue){
 /* Called when the attribute of the custom element is changed */
 }
 },

 accessors : {},
 methods : {},
 events : {}
});
```
仕上げの仕上げの適用

カスタム要素のスタイリングは、他のHTMLタグのスタイリングに似ています。クラス、ID、および属性セレクターは、カスタム要素で期待どおりに機能します。たとえば、新しく作成された
カスタム要素にボックスシャドウとボーダーラジウスを追加します。

カスタム要素の使用は、次のマークアップをに含めるのと同じくらい簡単です。
```
https://www.google.com/maps/embed/v1/streetview?key=<api_key>></api_key>&location=<latitude>></latitude>,<longitude>></longitude>
```
最終結果は、以下のCodepenに表示されます：
// Insert your API key here var API_KEY = ; xtag.register('google-map', { lifecycle: { created: function() { var iframe = document.createElement('iframe'); iframe.width = 600; iframe.height = 600; iframe.frameBorder = 0; iframe.src = 'https://www.google.com/maps/embed/v1/streetview?key=' + API_KEY + '&location=40.7553231,35.3434'; this.appendChild(iframe); } } });Webコンポーネントのブラウザサポートは少し大ざっぱですが、ポリフィルを使用してX-Tagライブラリを使用するデモは、IE9以降を含むすべての最新のブラウザで動作するはずです。
最終的な考え
ポリマーと比較して、X-TAGは、主にポリマーが持っている複雑な特徴がないため、カスタム要素を理解および実装するためのはるかにシンプルなAPIを提供します。セットアップを軽くて柔軟に保つつもりであり、他のWebコンポーネントAPIに適切なユースケースがない場合、X-Tagは確かにジョブの正しい候補者であるように見えます。 x-tag
を使用してカスタムWebコンポーネントの構築に関するよくある質問（FAQ） X-TAGとは何ですか？なぜそれがWeb開発において重要なのですか？
X-TAGは、カスタムの再利用可能なHTML要素の作成を簡素化する小さなJavaScriptライブラリです。これは、Shadow Dom、HTMLテンプレート、カスタム要素も含まれるTechnologiesのWebコンポーネントスイートの一部です。 X-TAGは、開発者が独自のHTML要素を作成し、コードをカプセル化し、コードベースを清潔で保守可能に保つことができるため、Web開発において重要です。また、開発プロセスを大幅にスピードアップできるコードの再利用も促進します。他のJavaScriptライブラリまたはフレームワークでX-Tagを使用できますか？
はい、X-TagはJavaScriptライブラリまたはフレームワークで使用するように設計されています。制限や特定のアーキテクチャパターンを課すことはないため、既存のプロジェクトに簡単に統合できます。 jQuery、React、Angular、またはvue.jsを使用している場合でも、X-Tagを使用して、アプリケーション全体で再利用できるカスタム要素を作成できます。タグ？

x-tagでカスタム要素を定義するのは簡単です。 XTAG.register関数を呼び出して、カスタム要素とその動作を定義するオブジェクトの名前を渡します。このオブジェクトには、ライフサイクルの方法、アクセサ、イベントハンドラーが含まれます。基本的な例は次のとおりです。

xtag.register（ 'my-element'、{
lifecycle：{ created：function（）{
this.textcontent = 'hello、world！' ;
}
}
}）
ライフサイクル方法は、カスタム要素の寿命のさまざまな段階で呼び出される特別な方法です。 X-Tagは、作成、挿入、削除、および帰属の4つのライフサイクル方法をサポートしています。これらの方法により、要素が作成され、DOMに追加され、DOMから削除されたとき、またはその属性のいずれかが変更されたときに特定のアクションを実行できます。 >
X-Tagは、カスタム要素のイベントを処理する簡単な方法を提供します。要素を登録するときに、イベントオブジェクトのイベントハンドラーを定義できます。たとえば、クリックイベントを処理するには、次のようなことを行います。 🎜> console.log（ 'element clicked！'）;
}
}
}）;

x-tagを使用してシャドウdomを作成できますか要素？

はい、x-tagはシャドウドム要素の作成をサポートします。これにより、要素のスタイルとマークアップをカプセル化して、ドキュメントの他の部分とは別に保持できます。シャドウルートを作成するには、this.createshadowroot（）メソッドを要素の作成したライフサイクルメソッド内に使用できます。他のHTML要素と同様に、CSSを使用します。要素がShadow DOMを使用している場合、Shadow Rootに

執筆時点では、X-TAGは積極的に維持されていません。最後のリリースは2017年でした。ただし、ライブラリは安定しており、プロジェクトで使用できます。問題が発生したり、新機能が必要な場合は、自分で実装するか、別のライブラリの使用を検討する必要がある場合があります。