Technote

Polymer Japan Cafe ＃4 もくもく会が開催されました

Sunday, February 24, 2019 11:32:00 AM

Polymer Web Components Polymer.co-edo

今月のPolymer/Web Components のもくもく会は、Polymer Japan との共催になったので、Co-Edoではなく渋谷にて開催となりました。

Lit Elementが2.0リリースになったので、 はじめての LitElement エレメントの作り方のバージョンを最新に更新しました。

Lit Elementではスタイル定義を以下のように、記述することが推奨されています。

class MyElement extends LitElement {
  static get styles() {
    return css`
    :host {
        display: block;
    }`;
  }
}

これはConstructable Stylesheetsとして2019/1/24にGoogleから提出されたアイデアで、 エレメントのスタイルを static getter で返すことで、ページ内に同一エレメントが複数回あるとき１回だけスタイルを評価するようになるというものです。 高速化には役立ちそうですが、現時点サポートしているブラウザあるのか？（Chromeはもうサポートしてるかも）という状況です。

なので前述のCodeLabとか、私の好きなLitLoaderとかは、まだConstructable Stylesheetsの記法には対応していません （もちろん従来の書き方でも動きます）。 でも注目していきたい仕様の1つではあるので、今後組み込むこともあるかもな、とは思っています。

詳しくはLitElementの公式ドキュメントのStylesを参照ください。