Web Componentsを使った部品のイベント伝達の続き
数日前に「 [Web Componentsでイベントを伝達する部品の作り方](http://www.eisbahn.jp/yoichiro/2014/07/dispatcheventfromwebcomponents.html)」っていうエントリを投稿しましたが、さらに検証をしてみたのと、ちょっと勘違いしてた点があったので、再度イベント伝達について取り上げようと思います。 Shadow DOM内で発生したイベントの伝達 そもそもこ…
カテゴリ: Web Components
Web Components部品へ何か情報を渡すための方法
Web Componentsを使った部品を考えたときに、単にタグをWebページに配置する利用方法も多いと思いますが、同時に何かパラメータやコンテンツを指定することで部品の挙動が変化する、といったことができると嬉しい部品もいっぱいあると思います。Shadow DOMが適用されることになるため、Webページと部品は基本的に「隔離」されます。そのため、何か情報を渡すための仕組みが必要になってきます。 ここでは、以下の2つの方法について紹介し…
Web Componentsでイベントを伝達する部品の作り方
Web Componentsで作られた部品は、もちろんそれを置いただけで効果があるものも多いでしょうが、その部品と他の部品の間、あるいはその部品を置いたWebページとの間でインタラクションをしたくなると思います。簡単な例であれば、画像付きボタン部品をWeb Componentsにて独自に実装した場合、そのボタンが押されたことをその利用側に伝達できなければなりません。伝達するための方法は、もちろんイベントです。 部品内でイベントを発生さ…
Web ComponentsのWebブラウザ別動作を調べてみた
Web Componentsでは、標準技術として幅広いWebブラウザで利用可能とすべく、Polyfillという名の「未対応Webブラウザ向け実装」が開発され、すでに利用可能です。このPolyfillを使うことで、Chromeだけでなく、Firefox、Opera、そしてIEでもWeb Componentsを動作させることができます。 では、実際どこまでPolyfillでWeb Componentsが動作するのでしょうか？Polyfil…
Shadow DOMがもたらしてくれる再利用可能性
Web Componentsは、Custom elements、HTML Templates、Shadow DOM、そしてHTML Importsと言う4つの基礎技術から成り立っています。これらを組み合わせると、独自のタグセットを再利用可能な形で部品化できる、という触れ込みになってます。 その再利用可能性はどこから来るのでしょうか？その可能性を大きく引き上げてくれているのが、Shadow DOMによる「スコープの隔離」です。 Web…
もし同一の名前でdocument.registerElement()しようとしたら？
Custom elements, HTML Templates, Shadow DOM, そしてHTML Importsの組み合わせで成り立っているWeb Componentsは、開発者が独自に「部品」を作ることを可能にします。その部品とは、独自に定義された「HTMLタグ」に他なりません。決められたタグセットを使ってWebアプリケーションを作っていく時代は、そろそろ終わりに近づいています。自分で部品を作り、さらに他の開発者によって公開さ…