laco0416です。実は何のアナウンスもないままにPolymerのv1.2.0がリリースされておりまして、しかもv1.0.6以来の Stable Release となりました！残念ながらまだ公式のリリースノートが出ていないですが…
本稿では前回のStable Releaseであるv1.0.6からv1.2.0の間に追加された主要な変更をもう一度振り返ってまとめてみます。
v1.0.6 (2015-07-09)
:host-contextのサポート
custom-styleブロック中で、:host-contextセレクタが使用可能になりました。
自身が呼び出されたホスト側の「外」にスタイルを適用できるようになりました。
<dom-module is="foo">
<style>
:host-context(.bar) .item {
background-color: red;
}
</style>
<template>
<div class="item">Hello</div>
</template>
</dom-module>
<body>
<div class="bar">
<foo></foo>
</div>
</body>
Polymer.dom(...).classList.containsのサポート
Polymer.dom(...)で取得した要素にclassList.containsが使えるようになりました。
v1.0.7 (2015-07-16)
v1.0.7には機能の追加はありませんでした。
v1.0.8 (2015-07-23)
<dom-module>の手続き的な宣言をサポート
これまではHTML中で宣言するしかなかった<dom-module>によるテンプレートをJavaScript側から作れるようになりました。これまでは
<dom-module id="foo">
<img src="stuff.png">
</dom-module>
というふうな宣言しかできませんでしたが、新しく追加されたregisterメソッドを使うと
document.createElement("dom-module").register("my-module");
とすることでdom-module要素によるテンプレートをJS側で定義することができます。
テンプレートに子要素を追加する方法は、標準のAPIで
var d = document.createElement("dom-module");
var c = document.createElement("div");
d.appendChild(c);
と書くこともできますが、registerと共に新しく追加されたimportメソッドを使って
var d = document.createElement("dom-module");
var c = d.import("my-module", "div");
と書くことも出来ます。ですがこちらは少々複雑で、書き方が直感的でないので余り使うことはない気もします。
v1.0.9 (2015-08-07)
v1.0.9には目立ったAPIの変更はありませんでした。
v1.1.0 (2015-08-13)
v1.1.0リリースは大々的にアナウンスされました。
custom-style moduleのサポート
dom-module要素でスタイルシートをモジュール化することができるようになりました。
例えば次のようなdom-module要素を宣言しておくと
<dom-module id="my-theme">
<template>
<style>
.warning {
color: red;
font-weight: bold;
}
</style>
</template>
</dom-module>
my-themeという名前で別の場所から呼び出せるようになります
<link rel="import" href="../my-theme/my-theme.html">
<dom-module id="x-foo">
<template>
<style include="my-theme"></style>
<style>:host { display: block; }</style>
<div class="warning">Uh oh!</div>
</template>
</dom-module>
v1.1.1
array-selectorにselectedItemを追加
array-selectorで選択中のオブジェクトを直接selectedItemで取得できるようになりました。
v1.1.2
ES6 class対応
Polymer(...)に渡すプロトタイプをES6 classで宣言可能にするため、内部の処理が見直され、 registeredコールバックの呼ばれるタイミングが変わりました。また、beforeRegisterコールバックが追加されました。
v1.1.3, v1.1.4
v1.1.3, 1.1.4には目立ったAPIの変更はありませんでした。
v1.1.5
Shadow DOM関連のutilメソッドを追加
isLightDescendantとisLocalDescendantの2つが追加されました。
isLightDescendant(node)は引数に渡したnodeが自身の子であり、自身から見てLight DOM(Shadow DOMに覆われていない)かどうかを判定します。isLocalDescendant(node)は自身の子かどうかだけを判定します。
Stable Release v1.2.0
v1.2.0は多くのバグフィックスと多くのユーティリティの追加が行われています。にもかかわらず解説もリリースノートも出ておらずチェンジログ以外に情報がないので、わかる範囲で拾います。
notifyObserverの追加
<content>で渡される子要素のobserverを全てkickするためのメソッドが追加されました
observeChildrenの追加
子要素のobserverが働いた時に実行されるコールバックを設定できるようになりました
Polymer({
is:'test-content',
created: function() {
Polymer.dom(this).observeChildren(function(info) {
console.log('test-content', info);
});
}
});
getEffectiveChildNodes, getEffectiveChildren, getEffectiveTextContentの追加
自身の子の取得に関するメソッドが3つも追加されました。getEffectiveChildNodesは子ノード、getEffectiveChildrenは子要素、getEffectiveTextContentは子要素のTextContentを列挙します。
Effectiveが意味するところは、宣言上の子ではなく、実際に意味を持つ子を取得できるということです。<content>タグは実際にホストから渡される要素に展開され、それぞれのメソッドの返り値にはcontent要素は含まれません。
他にもnotifyPath周りでAPIが変更・追加されているようですが、まだ読解できてなくて難しいです。公式のアナウンスを待つことにします。
今後の展開に関してはロードマップが発表されているので、Carbon要素や周辺ツールの強化に期待しましょう。