Edited at

Polymerがv1.2.0でStableになったのでこれまでのアップデート内容を振り返る

More than 3 years have passed since last update.

laco0416です。実は何のアナウンスもないままにPolymerのv1.2.0がリリースされておりまして、しかもv1.0.6以来の Stable Release となりました!残念ながらまだ公式のリリースノートが出ていないですが…

本稿では前回のStable Releaseであるv1.0.6からv1.2.0の間に追加された主要な変更をもう一度振り返ってまとめてみます。

https://github.com/Polymer/polymer/releases


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が使えるようになりました。

https://github.com/Polymer/polymer/issues/1907


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リリースは大々的にアナウンスされました。

https://blog.polymer-project.org/announcements/2015/08/13/1.1-release/


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で取得できるようになりました。

https://github.com/Polymer/polymer/commit/d65acd0


v1.1.2


ES6 class対応

Polymer(...)に渡すプロトタイプをES6 classで宣言可能にするため、内部の処理が見直され、 registeredコールバックの呼ばれるタイミングが変わりました。また、beforeRegisterコールバックが追加されました。

https://github.com/Polymer/polymer/commit/6224dc3


v1.1.3, v1.1.4

v1.1.3, 1.1.4には目立ったAPIの変更はありませんでした。


v1.1.5


Shadow DOM関連のutilメソッドを追加

isLightDescendantisLocalDescendantの2つが追加されました。

isLightDescendant(node)は引数に渡したnodeが自身の子であり、自身から見てLight DOM(Shadow DOMに覆われていない)かどうかを判定します。isLocalDescendant(node)は自身の子かどうかだけを判定します。

https://github.com/Polymer/polymer/commit/1e9110a


Stable Release v1.2.0

v1.2.0は多くのバグフィックスと多くのユーティリティの追加が行われています。にもかかわらず解説もリリースノートも出ておらずチェンジログ以外に情報がないので、わかる範囲で拾います。


notifyObserverの追加

<content>で渡される子要素のobserverを全てkickするためのメソッドが追加されました

https://github.com/Polymer/polymer/commit/07261e4


observeChildrenの追加

子要素のobserverが働いた時に実行されるコールバックを設定できるようになりました

Polymer({

is:'test-content',
created: function() {
Polymer.dom(this).observeChildren(function(info) {
console.log('test-content', info);
});
}
});

https://github.com/Polymer/polymer/commit/6499e83


getEffectiveChildNodes, getEffectiveChildren, getEffectiveTextContentの追加

自身の子の取得に関するメソッドが3つも追加されました。getEffectiveChildNodesは子ノード、getEffectiveChildrenは子要素、getEffectiveTextContentは子要素のTextContentを列挙します。

Effectiveが意味するところは、宣言上の子ではなく、実際に意味を持つ子を取得できるということです。<content>タグは実際にホストから渡される要素に展開され、それぞれのメソッドの返り値にはcontent要素は含まれません。

https://github.com/Polymer/polymer/commit/f34fb45


他にもnotifyPath周りでAPIが変更・追加されているようですが、まだ読解できてなくて難しいです。公式のアナウンスを待つことにします。

今後の展開に関してはロードマップが発表されているので、Carbon要素や周辺ツールの強化に期待しましょう。

Polymerプロジェクトのこれからについて - Qiita