HTMLにカスタム要素を実現する標準技術Web Components。事例をもとに技術特徴を解説

BRANK

フロントエンドの技術トレンドを解説する連載「新発見！フロントエンド技術のいま」。第2回のテーマは「Web Components」です。keyboard_arrow_downWeb Componentsとは？keyboard_arrow_downWeb Componentsは3つの要素で構成されるkeyboard_arrow_downWeb Componentsの使用例を見てみるkeyboard_arrow_downWeb Componentsを取り巻く技術keyboard_arrow_downおわりにWeb Componentsとは？Web Componentsを簡単に表現すると、HTMLに新しいタグ（カスタム要素）を追加する機能（API群）です。HTMLに新しいタグを追加して利用できれば確かに便利そうですが、このような機能がなぜ生まれてきたのか、その背景を見てみましょう。コンポーネントの標準技術は必要か？HTMLの標準は、WHATWGによるHTML Living Standardで明確に定められています。ブラウザは、その標準に沿って動作するように設計され、開発されています。よって、「個人としてはこんなタグが欲しい、使いたい」「便利なタグをつくって、それを皆に使って欲しい」というニーズがあっても応えられないわけです。HTML Living StandardHTMLの仕様は、WHATWG（Web Hypertext Application Technology Working Group）というA…