Polymerチームによって公式に提供されるCustom Elementsの一つapp-elemnetsについて公式ドキュメントの説明を抜粋して紹介します。
app-layout
アプリケーションのレイアウトの構築に便利なエレメントのコレクション
公式サイトのApptoolboxの解説にこれらのエレメントの画像付きの詳細な解説があります。実際にアプリケーションを作成する際は参考にしてください。
また、app-headerとapp-toolbarの各種オプションの実例については、以下のサイトが参考になります。
Test Drive
app-box
app-box
は各種スクロールエフェクトを備えたコンテナエレメントです。スクロールポジションに応じ視覚的なエフェクトが発生します。
app-drawer
app-drawer
は、画面の左右でスライドによって開閉されるドロワー型ナビゲーションです。
app-drawer-layout
app-drawer-layout
は、app-drawer
とその他コンテンツによって構成されるエレメントのラッパーの役割を担い、drawer付きの画面レイアウトを簡単に構築できます。
app-grid
app-grid
は@media
ルール内部で定義されたカスタムプロパティを利用したフラッド(fluid)グリッド式のレスポンシブレイアウトを作成するのに便利なヘルパークラスです。
app-header
app-header
は画面の上部にスクロールエフェクト付きのapp-toolbar
を使って画面を構成する際に使えるコンテナエレメントです。
app-header-layout
app-header-layout
はapp-header
とその他のコンテンツによって構成されるエレメントのラッパーの役割を担い、ヘッダー付の画面レイアウトを柔軟に構成するのに役立ちます。
app-toolbar
app-storage
アプリ内のデータを管理するための便利なツール群を提供するエレメント
app-indexeddb-mirror
app-indexeddb-mirror
は、indexedDBへキャッシュを行うことで、アプリケーションデータへリードオンリーのオフラインアクセス機能を容易な実装を可能にしてくれるエレメントです。
app-localstorage-document
app-localstorage-document
はインメモリの値とブラウザのローカルストレージシステム内のデータを同期するためのエレメントです。これによってPolymerのデータバインディングを使いローカルストレージを活用したアプリケーションを簡単に開発できます。
app-pouchdb
Custom ElemntsとPouchDBの連携に便利なエレメント
app-pouchdb-conflict-resolution
app-pouchdb-conflict-resolution
は宣言的な設定により、DOM内の論理的な関係によって順位づけを行うことで競合の回避を行ってくれます。
app-pouchdb-document
app-pouchdb-document
はPolymer.AppStorageBehavior
の実装によって、個々のPouchDBドキュメントへの読み書きを管理するためのエレメントです。
app-pouchdb-index
app-pouchdb-index
はデータベースの索引づけ(indexing)を宣言的でべき等な設定によって行なってくれます。
app-pouchdb-query
app-pouchdb-query
はPouchDBへ宣言的でリードオンリーなクエリの発行を可能とします。
app-route
クライアントサイドのモジジュラー式のルーティング機能を提供するエレメントです。
実際のアプリケーションでの利用例は公式サイトのAppToolboxの解説が参考になります。
app-location
app-location
はブラウザのロケーションバーとアプリケーションのステータスを同期するのに便利なエレメントです。app-location
を一度生成すると以後、ブラウザによって管理されるグローバルロケーションの変更をアプリケーション内から自動的に管理することができます。
app-route-converter
app-route-converter
は、route
オブジェクトとパスやクエリパラメーターの相互変換を行なってくれるエレメントです。
app-route
app-route
を使えば、ウェブアプリケーションのルーティングをエレメント自身が宣言的な記法で自己記述的に設定できるようになります。