この記事は webcomponents.org の記事とのクロスポストです。 Template や Shadow DOM、Custom Elements を使うことで、機能ごとの UI コンポーネントが実現できるようになることはこれまでに説明してきました。しかし、それらを使ったコンポーネントの HTML、CSS、JavaScript を別々に呼び出すのは、非効率です。 依存関係の解決も容易ではありません。jQuery UI や Bootstrap を思い出して下さい。JavaScript、CSS、Web Font といった各種リソースを、必要に応じて別々のタグに記述しなければなりませんでした。特にタグごとにコンポーネントとして扱うことが想定されている Web Components の場合、状況が複雑化することは簡単に想像できます。 これらのリソースを、ひとつの HTML ファイルにまとめて
![HTML Imports - Web Components を構成する技術](https://cdn-ak-scissors.b.st-hatena.com/image/square/e48cc763cff368d01beb9d799916c18cd431dbc6/height=288;version=1;width=512/https%3A%2F%2Fblog.agektmr.com%2Fimages%2Fcustom-elements-web-components%2Fimage.png)