webcomponentsとIE9

webcomponentsjsをIE9で使うときの注意点

ウェブサイトの制作にWeb Componentsを利用する場合、Chrome以外の非ネイティブサポートブラウザに対応するため、polyfill(webcomponents.js)を読み込むと思います。

概ね、このpolyfillは上手く動きますが、少し躓いたポイントがIE9であったのでメモを残しておきたいと思います 🙂

古いeligrey/classList.jsだと動かない

OMG!

webcomponentsjsは内部でclassList(DOMTokenList)を使用するのですが、IE9以下はこれをサポートしていません。ですから、classListのpolyfillも読み込む必要があります。

最初、googleで”classlist polyfill”と検索すると、gligrey/classList.jsが1番目にヒットします。そこで、readmeにあるpublic CDNでホストされてあるpolyfillを使っていました。しかし、README.mdにもあるように、public CDNでホストされているファイルは古いバージョンらしくココに罠がありました。このバージョン(2014.01.31)はclassListのpolyfillとしては上手く動くようですが、window.DOMTokenListのpolyfillはサポートされてないらしく、webcomponentsjsのfeature detectionで撥ねられてしまいます。webcomponentsjsのREADME.mdには

The polyfills may work in older browsers, however require additional polyfills (such as classList) to be used.

としか書かれてないので、しっかりと書いて欲しかったです。「classListのpolyfill読み込んでるのになんで動かないの???」ってことになります。一応、console.warnにはそれっぽいメッセージを出力しますが 🙁

Missing DOMTokenList prototype, please include a compatible classList polyfill such as http://goo.gl/uTcepH.

で、IE9でwebcomponentsjsを使うにはどうするかですが、上記のメッセージのとおり、remy/polyfillsのclassList.jsを使うことで解決しました。試してないですが、現在のバージョンのeligrey/classList.jsでも上手く動くと思います。

ちなみに、MDNのclassLIst polyfillもHTMLElementにclassListプロパティを生やしてる感じだったので、同様の問題が発生しますから気をつけたいですね。

クロスオリジンなHTMLをimportできない

オリジン弁当

Web Componentsは文字通りWebの部品です。ある一塊の機能を持った汎用な部品ですから、色々なウェブサイトで再利用できます。となると当然、オリジンを超えてコンポーネントを利用したくなるのが自然です。しかし、IE9では同一オリジンからしかHTMLをインポートできません。これはエラーメッセージ”Error: アクセスが拒否されました。“から推測するに、IE9のXMLHttpRequestがクロスオリジンに対応していないためだと思われます。一応、IE9以下にもXDomainRequestというXMLHttpRequest advanced features ―― 以前はXMLHttpRequest Level 2とも ――のようにクロスオリジンなリクエスト方法がありますけどね 🙁

解決方法としては、依存解決にbower等を使って同一生成元からインポートするくらいしかなさそうですかね 😕

終わりに:IE9絶滅しろ

そろそろIE9は”いいんじゃない”ですかね。え、まだ現役ですか!?そうですか・・・

img: Lili Vieira de CarvalhoOMG!Emil Olsen Origin Bento