Web向けのマテリアルデザインフレームワークのMaterial Components for Web(MDC)をWeb Componentsとしてリパックした Material Web Components(MWC)というプロジェクトが Polymerプロジェクトから提供され始めています（ 2018/5/9、Google I/O2018でリリース）。
最新のコンポーネントを抜粋で紹介します。
mwc-button
ボタンです。ボタンのラベルはlabel属性またはタグ内のどちらでも指定可能です。
表示例は MDCのデモが参考になります。
<mwc-button [icon="string"] [raised/unelevated/outlined/dense] [label="string"] [disabled]></mwc-button>
※ なお、タグ中の[ ]は任意指定であることを示すもので実際のコードに記載するものではありません
mwc-icon
アイコンを単体表示するコンポーネントです（ボタンなど一部のコンポーネントはicon属性に指定すると適切にレイアウト表示できます）。
アイコンの名称は Material Designのアイコン一覧で確認できます。
<mwc-icon>icon_name</mwc-icon>
npm未リリースのコンポーネント
現状、開発中でnpm未リリースですが、リポジトリに存在しているコンポーネントもあります。
mwc-chip
タグなどに用いるチップです。表示例は MDCのデモが参考になります。
<mwc-chip-set [choise] [filter]>
<mwc-chip [leadingIcon="string"] [trailingIcon="string"] [active] [label="string"]></mwc-chip>
</mwc-chip-set>
mwc-card
カードです。現状では大外のカード枠のみ表示可能です。
<mwc-card [stroke]>innerHTML</mwc-card>
mwc-dialog
モーダルダイアログです。show()とclose()というメソッドを持っています。また、openedというプロパティのtruthy/falsy値設定でも切り替わります。
<mwc-dialog [headerLabel="String"] [acceptLabel="OK"] [declineLabel="Cancel"] [scrollable]>innerHTML</mwc-dialog>
まとめ
Material Web ComponentsはPolymerが従来提供してきたPaperElementを置き換える位置付けのコンポーネント群です。
リリース済みのコンポーネントは @material/mwc-button などの名称でnpm install可能です。
CSSなどはベースのMDC(Material Components for Web)のものを活用しているため、リリース初期段階ながら見た目は整っています。
また、Web Componentsであるため、バンドルしたJavascriptを読み込めばHTMLからも利用できます。
MDCには他にも多数のコンポーネントがあり、移植には時間がかかりそうです。
コンポーネント化にあたり、 MDCが提供するadaptorインターフェースを利用しているため、自分でMWC風コンポーネントを実装することも不可能ではありません（ VueJS向けアダプターの実装が先行しており参考になります）。
Chuma Takahiro
関連記事
