こんにちは伊藤です。
久しぶりの投稿になります。
サボってすみません。
Web Components （ウェブ コンポーネント）について
さわりだけ紹介したいと思います。
Web Components （ウェブ コンポーネント）とは
Web Components は簡単に説明すると「HTMLの要素を部品化する」仕組みです。
ヘッダやフッタなど、サイト内の各画面で共通化できるものを部品として切り出すことで、
再利用性やメンテナンス性、開発効率を上げるなどが期待されています。
そもそも部品化出来るんじゃない？
例えば、 JavaScript を用いて、HTMLの要素の一部を切り出して
それをJavaScriptでDOMに挿入したり、PHP でのファイルのインクルードなど
一つのテンプレート（部品化）をすることは可能です。
ただし、コーディングを経験する方で一度は経験すると思うのですが
同じものを別のページで使用したとき、
意図しないCSSの影響を受けてレイアウトが崩れたり、
意図しないJSのイベントに要素が反応してしまったり
といったことが起こるため、HTMLの要素を完全に部品化することは難しいのです。
他の影響を受けない Web Components
Web Componentsは、他の影響を受けずにマークアップの
テンプレート化（カプセル化）することで
上記のような問題を解決するライブラリとなります。
Web Components 「4つの要素」
Web Componentsは、以下の4つの要素で構成されています。
1. Templates （部品の内容を記述する仕組み）
2. Imports （1の部品を呼び出す仕組み）
3. Custom Elements （1の部品を使う仕組み）
4. Shadow DOM （1の部品をカプセル化する仕組み）
Web Componentsのフレームワーク
Googleから開発中のPolymer
下記URL
http://www.polymer-project.org/tools/designer/
でPolymerを視覚的に操作できます。
そして、Mozillaが開発しているX-Tag（githubにて公開されているようです！）
ブラウザ対応について
Web Componentsはまだ仕様策定中であり、利用できるブラウザがまだまだ限られています。
Googleが開発しているPolymerやMozillaが開発しているX-Tagなどの
Web Componentsのフレームワークで未対応のブラウザでもWeb Componentsを利用することができます。
以下URLにて対応状況が確認できます。
Browser Compatibility – Polymer
細かい技術的な話は追々紹介したいと思います。
以上駆け足になってしまいましたが・・・。
ザックリとWeb Componentsの簡単な紹介になります。
ではでは。
