#daiizメモ

Scrapboxに夢中

Hello, Shadow DOM & Custom Elements!

Chrome v54になったので最新仕様の Shadow DOM と Custom Elements が使えるようになった.HTMLの大進化に向けた第一歩になると思う.これらの機能を活用することにより,独自のHTML要素を定義できるようになる.

f:id:daiiz:20161017014243p:plain

いくつもの<div><iframe>を組み合わせて作られた「アナリティクスHTMLコード」をコピペするよりも,予め開発者によって定義された<google-analytics-query>タグを貼り付けるほうがラクだし格好いい.この独自タグ(Web Component)の定義内部ではCSSやJavaScriptも全部含まれているので,タグのユーザーは貼るだけですぐに使える.独自タグの内部の要素は基本的に外部のCSSの影響を受けないし,逆に外部へ影響を与えたりしないので,「このタグ貼り付けたらこっちの要素のデザインが壊れた」ということが起きなくなりハッピーになれる.

Chromeではこれらの格好いい仕様が使えるようになったけれど,残念ながら他のブラウザではまだ使えないことが多い.そんなときは Polymer を介してやれば良い.Polymerを使って独自のHTMLタグを定義した場合,最新ChromeのようなShadow DOMなどが使える環境ではそれを使い,まだダメな環境ではPolyemrがうまい感じにこれらをエミュレートしてくれる.*1

Polyemrはpolyfillライブラリとして活躍するだけでなく,Material Designを採用したカスタムHTML要素を多く提供している.これらのHTMLタグは,Polymer Catalog にアクセスして入手することができる.コード例やデモも豊富なので,まずはこの辺りを読んで勘を掴んでいこう.

*1:ただ本気でShadow DOMをエミュレートするとコストが高すぎるらしく,Polymer v1では代わりにShady DOMとして実現しているらしい.