作ったものはアプリケーションではなくごく普通のシングルページのウェブサイトなので、Polymerの機能を完全に使いこなしたという話ではありません。一番の目的はCSSのコンポーネント化だったんだけど、結局はこの目的が完全に達成された、とはいいにくい結果になりました。
以下はサイトを作っていて気づいたことや、便利だなーと思えた感想みたいなもの。
Polymer1.2におけるShadow DOM
Polymer1.2ではというよりも、1.0かららしいがどうも0.5から大きく仕様が変更されたらしく、使いやすくなってるんだか使いにくくなってるんだかよくわからないものになっています。目的が達成できなかった理由はこれです。
dom-optionsのオプションがdefaultでshadyになっています。細かい違いはあるかもしれないけれども、おそらく0.5のときはshadowと同じような仕様だったはずです。
このshadyというのがちょっとしたクセ者で、これについてはQiitaの以下の記事がとてもわかりやすいです。1.0となっていますが1.2でも変わっていません。
強引に簡単にまとめてしまうと、ある程度の外からのスタイリングができる甘えが許されるようになった反面、<content>内で表示される内容のCSSの継承順位が高くて困るときにはとても困るといった感じです。
結局shadyで作成したのですが、これはオプションの設定の存在に気がついたのが製作半ばを過ぎていたという理由からで、次に作る機会がもしあればshadyではなくshadowを使うと思います。できるだけ大きく変わることはないだろう仕様にはそった形にしておきたいからです。
外部の.cssのファイルを読み込めない
1.0では<link rel="import" type="css" href="my-awesome-button.css">のようにかけましたが、1.1からdeprecatedされ<style include="paper-material"></style>と記述するようになりました(一応1.2でも動きはします)。ここでincludeしているのはCSSのファイルではなく、ほぼCSSだけが記述されているHTMLです。
CSSを別にわけて管理したかった理由はPostCSSを通したかったこともそうなのですが、Vue.jsの.vueとかも自分はあんまり好きじゃないので、こういったコンポーネント化でHTMLとCSSが一緒になっていることに抵抗があったということもあるかもしれません。
実際にどうわけたかというと、HTMLをJadeで書いていたので、Jadeでincludeさせただけです。
Polymerのコンポーネントの:root
通常のCSSの:rootというと<html>要素になるわけだけれども、Polymerのコンポーネントで指定する:rootはどうも<body>要素になっているらしい。作っていて気づいたことなのでドキュメントのどこに書いてあるのかはちょっと探してないのでわかりません。
:rootが<body>に適用されるため、ブラウザの<body>にあるmarginは:rootに指定することで0にすることができます。
便利なiron-media-query
便利だなと思えたElementsはいくつかあったのですが、今回のサイトで特にそう思ったのがiron-media-queryでした。
Reactでいうと使ったことはありませんがおそらくreact-responsiveが同様のものになると思います。一度こういった便利なものを使ってしまうと、コンポーネント化されていないCSSでmedia queryを書くのがつらくなる……。
Vulcanize
Vulcanizeでimportしているファイルを一つにまとめることができます。将来的にHTTP/2が使えるころには不要になってきそうですが、今の段階では多くの人がVulcanizeする必要がありそう。
crisperはHTML一つではなくJavaScriptは別ファイルにしてくれるものらしく、最初は何に使うのかさっぱり理解できませんでしたがどうやらBabelを使うときに必要になることがある感じのようです。