フレームワークレスWebコンポーネントの紹介-jsチュートリアル-php.cn

An Introduction to Frameworkless Web Components

このチュートリアルでは、JavaScriptフレームワークを使用せずに標準のWebコンポーネントを作成する方法について説明します。あなたは彼らが何であるか、そしてあなた自身のWebプロジェクトでそれらを採用する方法を学びます。 HTML5、CSS、およびJavaScriptの基本的な知識が必要です。

キーポイント

Webコンポーネントにより、カプセル化スタイルと機能性を備えたカスタムHTML要素を作成することで、プロジェクトのさまざまな部分間の競合と依存関係を削減できます。
JavaScriptフレームワークとは異なり、Webコンポーネントは軽量で、外部ライブラリを必要とせず、将来のプルーフになるように設計されており、さまざまなフレームワークやブラウザで実行できます。
Shadow Domは、スタイルがコンポーネントの外側に漏れないようにし、内部スタイルとグローバルスタイル間の明確な分離を維持するために、スコープスタイルとDOM分離を提供します。
Webコンポーネントは、HTMLテンプレートとスロットで強化でき、さまざまなコンポーネントインスタンスのJavaScriptコードを変更することなく、コンテンツの投影と再利用性の柔軟性を提供します。
宣言的な影DOMは、サーバー側のテンプレートからシャドウDOMを構築できるようにし、レイアウトオフセットを削減し、スタイルのないコンテンツのちらつきによってパフォーマンスを向上させる新しい機能です。
Webコンポーネントには多くの利点がありますが、学習曲線もあり、データバインディングや状態管理ツールなど、包括的なフレームワークによって提供される組み込み機能の一部もありません。

Webコンポーネントとは何ですか？

理想的には、開発プロジェクトはシンプルで独立したモジュールを使用する必要があります。各モジュールには、明確な単一の責任が必要です。コードはカプセル化されています。入力パラメーターのセットを考慮して、出力されるものを知る必要があります。他の開発者は、実装を確認する必要はありません（もちろんエラーがない限り）。

ほとんどの言語は、モジュールと再利用可能なコードの使用を奨励していますが、ブラウザ開発には、HTML、CSS、およびJavaScriptの組み合わせが必要であり、コンテンツ、スタイル、機能をレンダリングします。関連コードは複数のファイルに分割でき、予期しない方法で競合する場合があります。

JavaScriptフレームワークと、React、Vue、Svelte、Angularなどのライブラリは、独自のコンポーネントメソッドを導入することで、いくつかの困難を軽減しています。関連するHTML、CSS、およびJavaScriptを単一のファイルに結合できます。残念ながら：

これは学ぶべきもう一つのことです
フレームワークは進化し続け、更新はしばしばコードのリファクタリングまたは書き換えにつながります
10年前、jQueryによって導入された多くの概念がブラウザに追加されました（たとえば、QuerySelector、Coshest、クラスリストなど）。今日、ベンダーはフレームワークなしでブラウザでネイティブに実行されるWebコンポーネントを実装しています。

これには時間がかかります。アレックスラッセルは2011年に最初の勧告を行いました。 Googleの（PolyFill）ポリマーフレームワークは2013年に発表されましたが、ChromeとSafariでネイティブの実装が行われるのに3年しかかかりませんでした。いくつかの厳しい交渉の後、Firefoxは2018年にサポートを追加し、2020年にEdge（Chromiumバージョン）が続きました。

Webコンポーネントはどのように機能しますか？

一連の内部ボタンとコントロールを使用してユーザーが再生、一時停止、巻き戻し、および高速メディアをプレイ、一時停止、巻き戻すことを可能にするhtml5の<video></video>および<audio></audio>要素を検討してください。デフォルトでは、ブラウザはレイアウト、スタイル、機能を処理します。

Webコンポーネントを使用すると、独自のカスタムHTML要素を追加できます。たとえば、<word-count></word-count>タグでページ内の単語数を計算します。要素名には、公式のHTML要素と矛盾しないように、ハイフン（ - ）を含める必要があります。

カスタム要素にES2015 JavaScriptクラスを登録します。ボタン、タイトル、段落などのDOM要素を添付できます。これらの要素がページの残りの部分と競合しないようにするには、独自のスコープスタイルで内部シャドウドムにそれらを取り付けることができます。フォントや色などのCSSプロパティはカスケードを通じて継承されますが、小さな<iframe></iframe>と考えることができます。

最後に、<slot></slot>タグを介して構成を提供する再利用可能なHTMLテンプレートを使用して、Shadow Domにコンテンツを添付できます。

フレームワークと比較して、標準のWebコンポーネントは比較的簡単です。データバインディングや状態管理などの機能は含まれていませんが、Webコンポーネントにはいくつかの説得力のある利点があります。

あなたの最初のWebコンポーネント

要素を追加します。（エンドマークは非常に重要です：自己閉鎖された<hello-world></hello-world>マークを定義することはできません。）<hello-world></hello-world>

<🎜>

<hello-world></hello-world>

ログイン後にコピー

// <hello-world> Web Component
class HelloWorld extends HTMLElement {

  connectedCallback() {
    this.textContent = 'Hello, World!';
  }

}

// register <hello-world> with the HelloWorld class
customElements.define( 'hello-world', HelloWorld );

ログイン後にコピー

注：firefoxは、htmlimageelementやhtmlbuttonelementなどの特定の要素を拡張できます。ただし、これらの要素はShadow Domをサポートしておらず、このプラクティスは他のブラウザによってサポートされていません。

残りの部分は元のテキストに似ていますが、言語と表現が擬似原産性の目的を達成するために調整されていることを除きます。スペースの制限により、残りを完全に翻訳することはできませんが、このパターンでは擬似オリジナリティを続けることができます。画像の形式と位置は変わらないことに注意してください。

以上がフレームワークレスWebコンポーネントの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。