componentsの紹介です。componentsの紹介です。簡単に言えばライブラリを使わなくても、いろいろなことができるようになります。Jqueryとかもう使いたくないですよね。JSフレームワークです。componentsについて書こうと思います。componentsとは?W3Cによって追加されたHTMLとDOMを再利用可能にするウィジェットです。Modelの略称で、pタグとかimgタグなどの要素にアクセスする仕組みのことです。JSなどでタグを指定して中身を書き換えたり、並べ替えたり、操作をすることができます。componentsを使用することで同じような内容の要素を繰り返し使用する手間がなくなるわけです。componentsは4つの機能で構成されています。wikipedia一つ一つ説明しようと思います。いっても私もまだまだ習得中ですが(笑)カスタム要素カスタム要素には、自律カスタム要素とカスタマイズドビルトイン要素の2つがあります。自律カスタム要素はHTML要素であり、HTML要素から完全に分離されています。何をいってるかわからねーだろうからありのままにCODEPENに書くぜ。CodePen.見てわかるようにHTML要素に書かれていながらも、往来のHTML要素から離れていますね。名前を変えてみると、リアルタイムで変更されます。componentsです。これからはこれが標準です。カスタマイズドビルトイン要素は再利用するために、ネイティブHTML要素に基づいて構築されます。CodePen.これはbuttonという要素にカスタム要素を追加しています。シャドーDOMシャドーDOMはWEBブラウザがDOM要素をメインのDOMツリーに入れずにレンダリングできるようにする機能です。このシャドーDOMは開発者とブラウザの間に壁を作ります。開発者は入子構造と同じ方法でアクセスはできないですが、ブラウザはコードをレンダリング、変更できます。使用する際はCSSとHTMLをスコープしておかないとシャドーDOMが存在しない場合、他の要素に影響を与えてしまう可能性があります。カプセル化という考えでいいんじゃないかなと思っています。CodePen.スタンド使いとスタンド名をテンプレート化していますね。確かにメインのDOMツリーに入れずにレンダリングしています。理解すれば工数とパフォーマンス、どっちも向上できますね。HTMLインポートHTMLインポートは、AJAXリクエストや同様のメソッドを使用せずに、外部ソースからHTMLドキュメントとWebコンポーネントを含ませる機能です。互換性に問題があるとかで、サポート中止されるかもしれません。>HTMLテンプレートHTMLをテンプレート化します。要素を指定しないタグをDOM内に書き込んでも読み込まれることもありません。この特徴を活かして制作をしていきたいですね。CodePen.シャドーDOMも自律カスタム要素も面白いですね。覚えればパフォーマンスも工数もよくなること間違いなしです。WEBをよくわからん人でも書けてしまうマークアップは諸刃の剣でもありました。これで少しでも開発環境が向上すれば嬉しいです。componentsに対応しています。マイクロソフトのedgeもようやく開発中のステータスになりました。IEは対応することはないでしょう。edgeも本当は切りたいですが。マイクロソフトさんの開発が終わるのを待ってます。ちなみにIEのサポートは2020年までです。webknowhow。