Webコンポーネントとしてマルチセレクトコンポーネントを作成します

アップデート12.05.2016：コンパニオン記事「アクセス可能なWebコンポーネントの作成方法」は、この記事の制限に対処します。 完全な理解については、両方をお読みください。 この記事は、ライアン・ルイスによるピアレビューの恩恵を受けました。 SitePointのピアレビュアーに感謝します！ 最新のWebアプリケーションは、効率的なコンポーネント管理を要求します。 大量のHTML、JavaScript、およびCSSを処理するには、スタイルの競合やスクリプトの干渉を防ぐために、アプリケーションを再利用可能なカプセル化されたコンポーネントに分解する必要があります。 従来、コンポーネントコードは複数のファイルに散らばっています。 さらに、多数のDIVとスパンを備えた複雑なマークアップは、読みやすさと保守性を妨げます。 W3C標準であるWebコンポーネントは、ソリューションを提供します。 このチュートリアルでは、Webコンポーネントについて説明し、マルチセレクトウィジェットの構築を示しています。

キーテイクアウト：

マークアップ、スタイル、スクリプトをカプセル化することにより、Webコンポーネントが開発を合理化し、保守性を向上させ、競合を削減します。 このチュートリアルは、カスタム要素、Shadow DOM、およびHTMLテンプレートを使用して、再利用可能なマルチセレクトウィジェットを構築します。

コンポーネントは最新のブラウザによってネイティブにサポートされており、ポリフィルにより幅広い互換性が保証されています。

機能には、カスタマイズ可能なプレースホルダー、動的更新、カスタムイベント処理が含まれます。 ポリマーやX-TAGなどのフレームワークを使用したWebコンポーネントの拡張についても説明します。 <li> <li>Webコンポーネントの理解： <li> Webコンポーネント上記の課題に対処します。 コンポーネントの実装を含む単一のHTMLファイルをリンクし、カスタムHTML要素を介してページで使用することができます。 これにより、カプセル化が強化され、コードの表現力が向上します。 コア仕様は次のとおりです <li> <li>カスタム要素：コンポーネントのカスタムHTML要素を定義します。

htmlテンプレート：コンポーネントのマークアップを定義します。

Shadow dom：>コンポーネントの内部構造をカプセル化し、ページのスタイルとスクリプトから分離します。

<li>htmlインポート：（大部分が置き換えられた）ページへのコンポーネントを含めて促進されました。 <li>生産対応のマルチセレクトコンポーネントを構築しましょう。 GitHubでデモとソースコードを使用できます 生産対応のマルチセレクトコンポーネントの構築： <li> マルチセレクトウィジェットには、次のマークアップ構造があります

<x-multiselect placeholder="Select Item">
  <li value="1" selected>Item 1</li>
  <li value="2">Item 2</li>
  <li value="3" selected>Item 3</li>
</x-multiselect>

<x-multiselect>要素はa placeholder属性を使用します。 リスト項目（<li>）にはvalueおよびselected属性があります。 コンポーネントは、選択された値の配列を返すA selectedItems()メソッドを公開します（この例では[1, 3]）。 また、選択の変更に関するイベントも発生します。 目標は、完全な最新のブラウザの互換性です。change

テンプレート（）：multiselect.html

コンポーネントのHTML、CSS、およびJavaScriptは

に存在します。 HTMLテンプレートは、コンポーネントの構造を定義します multiselect.html

<template id="multiselectTemplate">
  <style>
    /* component styles */
  </style>
  <div class="multiselect">
    <div class="multiselect-field"></div>
    <div class="multiselect-popup">
      <ul class="multiselect-list">
        <content select="li"></content>
      </ul>
    </div>
  </div>
</template>

要素は、ホスト要素からシャドードムに

要素を挿入します。 <content select="li"><li>コンポーネントの作成：

javaScriptはカスタム要素を登録します：

これには、テンプレートを見つけること、

から継承するプロトタイプの作成、

を定義してシャドウdomを作成し、カスタム要素を登録することが含まれます。

// 1. Find template
var ownerDocument = document.currentScript.ownerDocument;
var template = ownerDocument.querySelector('#multiselectTemplate');

// 2. Create component prototype
var multiselectPrototype = Object.create(HTMLElement.prototype);

// 3. Define createdCallback
multiselectPrototype.createdCallback = function() {
  var root = this.createShadowRoot();
  var content = document.importNode(template.content, true);
  root.appendChild(content);
};

// 4. Register custom element
document.registerElement('x-multiselect', { prototype: multiselectPrototype });

（レンダリング、イベント処理、属性の処理、スタイリングなど、コンポーネントの実装の残りはここに続きます。長さの制約のため、省略されていますが、リンクされたGithubリポジトリで利用できます。）HTMLElement.prototype） createdCallback

ブラウザのサポートとポリフィル：

Webコンポーネントは、最新のブラウザで優れたサポートを提供していますが、すべての主要なブラウザにわたって互換性を確保します。 デモページは、使用法を示し、潜在的なポリフィル関連の問題（

バリエーションやシャドウドンスタイリングなど）に対処します。 ポリマーとx-tag：

ポリマーやX-TAGなどのフレームワークは、Webコンポーネントの開発を簡素化し、追加機能を提供し、ボイラープレートコードを削減します。 webcomponentsjsdocument.currentScript結論：

Webコンポーネントは、Web開発を大幅に進めます。 このチュートリアルでは、機能的なマルチ選択コンポーネントの構築を紹介し、このテクノロジーの力と利点を強調しています。 アクセシビリティのベストプラクティスについては、リンクされた「アクセス可能なWebコンポーネントの作成方法」記事を参照してください。

以上がWebコンポーネントとしてマルチセレクトコンポーネントを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。