web componentsの紹介です。
簡単に言えばライブラリを使わなくても、いろいろなことができるようになります。
Jqueryとかもう使いたくないですよね。
これからの時代はweb components + JSフレームワークです。
2020年のIEサポート終了に備えてweb componentsについて書こうと思います。
web componentsとは？
W3Cによって追加されたHTMLとDOMを再利用可能にするウィジェットです。
DOMとはDocument Object Modelの略称で、pタグとかimgタグなどの要素にアクセスする仕組みのことです。
JSなどでタグを指定して中身を書き換えたり、並べ替えたり、操作をすることができます。
つまりweb componentsを使用することで同じような内容の要素を繰り返し使用する手間がなくなるわけです。
wikipediaによるとweb componentsは４つの機能で構成されています。
Web Components consist of 4 main features which can be used separately or all together:
- Custom Elements – APIs to define new HTML elements
- Shadow DOM – Encapsulated DOM and styling, with composition
- HTML Imports – Declarative methods of importing HTML documents into other documents
- HTML Templates, an HTML fragment is not rendered, but stored until it is instantiated via JavaScript
from wikipedia
一つ一つ説明しようと思います。といっても私もまだまだ習得中ですが（笑）
カスタム要素
カスタム要素には、自律カスタム要素とカスタマイズドビルトイン要素の２つがあります。
自律カスタム要素はHTML要素であり、HTML要素から完全に分離されています。何をいってるかわからねーだろうからありのままにCODEPENに書くぜ。
自律カスタム要素
See the Pen EOrZvz by okada-web (@okada-web) on CodePen.
見てわかるようにHTML要素に書かれていながらも、往来のHTML要素から離れていますね。
名前を変えてみると、リアルタイムで変更されます。これがweb componentsです。
これからはこれが標準です。
カスタマイズドビルトイン要素は再利用するために、ネイティブHTML要素に基づいて構築されます。
カスタマイズドビルトイン要素
See the Pen customized built-in elements by okada-web (@okada-web) on CodePen.
これはbuttonという要素にカスタム要素を追加しています。
JSみたいですね。
シャドーDOM
シャドーDOMはWEBブラウザがDOM要素をメインのDOMツリーに入れずにレンダリングできるようにする機能です。
このシャドーDOMは開発者とブラウザの間に壁を作ります。
開発者は入子構造と同じ方法でアクセスはできないですが、ブラウザはコードをレンダリング、変更できます。
使用する際はCSSとHTMLをスコープしておかないとシャドーDOMが存在しない場合、他の要素に影響を与えてしまう可能性があります。
カプセル化という考えでいいんじゃないかなと思っています。
Shadow DOM
See the Pen MzLJdR by okada-web (@okada-web) on CodePen.
スタンド使いとスタンド名をテンプレート化していますね。
確かにメインのDOMツリーに入れずにレンダリングしています。
理解すれば工数とパフォーマンス、どっちも向上できますね。
HTMLインポート
HTMLインポートは、AJAXリクエストや同様のメソッドを使用せずに、外部ソースからHTMLドキュメントとWebコンポーネントを含ませる機能です。互換性に問題があるとかで、サポート中止されるかもしれません。
< link rel = "import" href = "xxxxxxxxxx.html" >
HTMLテンプレート
HTMLをテンプレート化します。ただ、要素を指定しないタグをDOM内に書き込んでも読み込まれることもありません。
この特徴を活かして制作をしていきたいですね。
See the Pen HTML Template by okada-web (@okada-web) on CodePen.
シャドーDOMも自律カスタム要素も面白いですね。
覚えればパフォーマンスも工数もよくなること間違いなしです。
WEBをよくわからん人でも書けてしまうマークアップは諸刃の剣でもありました。
これで少しでも開発環境が向上すれば嬉しいです。
最後に、大抵のモダンブラウザではweb componentsに対応しています。
マイクロソフトのedgeもようやく開発中のステータスになりました。
IEは対応することはないでしょう。
もうIEは切るべきです。edgeも本当は切りたいですが。マイクロソフトさんの開発が終わるのを待ってます。
ちなみにIEのサポートは2020年までです。
