ウェブサイトの制作にWeb Componentsを利用する場合、Chrome以外の非ネイティブサポートブラウザに対応するため、polyfill(webcomponents.js)を読み込むと思います。
概ね、このpolyfillは上手く動きますが、少し躓いたポイントがIE9であったのでメモを残しておきたいと思います 🙂
古いeligrey/classList.jsだと動かない
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 Carvalho – OMG!, Emil Olsen – Origin Bento