WebComponentsを先導してきた PolymerがGoogle I/O 2018でPolymer3.0をリリースし、アーキテクチャを大きく変えました。
実際に検証したところ、npmでパッケージをインストールしwebpackでビルドする、というJavascript開発の標準的なフローでビルドできます。
Polymer3.0で各開発者が実装する LitElement(既存資産を流用する場合はPolymerElement)は、Custom Element標準ベースであるため、完成したコンポーネントはHTMLタグと同じ感覚で利用できます。
LitElementには、描画ライフサイクルに割り込むコールバックも定義されていて、コード構成はReact.jsを意識したものになっています。
React.jsはテンプレートがJSXですが、LitElementではlit-htmlを利用しており、文法的に生のHTML/CSS/Javascriptで書いていくスタイルが分かりやすい印象と言えます。
Polymer特有の使い方をハイライトでまとめると以下のような流れになります。（詳細はLitElement公式サイト参照）
npm i @polymer(何かコンポーネントを追加したい場合にもnpm installで完結)- コードの冒頭で
import {LitElement, html} from '@polymer/lit-element';によりES Modules形式でインポート LitElementをextendsしたclassを実装。_render()内のlit-htmlテンプレート実装がミニマム構成- webpackなどでビルド。Polymer特有の必須loaderなどはなし
- 利用するHTMLから