Material Web Componentsの mwc-rippleはインク・リップル効果を提供するWebComponentです。
CSS
<mwc-ripple>というタグは、画面全体を装飾しますが、親要素にposition: relativeを指定することにより、描画範囲を限定できます。
よって、基本的には以下のような構成で用います。
<div style="position: relative">
<mwc-ripple></mwc-ripple>
</div>
イベントハンドラ
また、 mwc-ripple: Ripple is not working since “0.14.0” version. #2139の説明のとおり、初期状態ではイベントハンドラがないため、リップル効果が作動しません。
デモコードのようにeventListenerを登録すると動作します。
プロパティ操作
mwc-rippleタグじたいにもselectedなどのプロパティを指定できます。
ReactなどのJSコンポーネントの部品として使う場合には、
リファレンスを参考にプロパティを操作することで、動的に見た目を制御できます。
Chuma Takahiro
関連記事
denoのテスティング機能は、ツールを追加インストールせずに動作するテストランナーを提供しています。deno testサブコマンドで、ファイルやディレクトリ単位のテストスイートを一括実行できます。
denoはブラウザ環境との互換性が高く、ブラウザ向けのコードをテストできます。WebWorkersやWebAssemblyを含む高度な構成もそのまま動作します。ただしDOMは別モジュールとなっており、標準的なdenoテスティングのスコープには含まれていません。
……
TypescriptやJavascriptの言語仕様には条件つきコンパイルを含むマクロがありませんが、esbuildにはその機能があります。
……
Litは、WebComponents標準に準拠したクラスコンポーネントを実装するフレームワークです。
APIクライアントの実装パターン
APIクライアント用途の典型的な実装パターンは以下のような例になります。
import { html, LitElement } from "lit";
import { customElement、 state } from "lit/decorators.js";
@customElement("sample-app")
class SampleApp extends LitElement {
@state()
_person = {};
async connectedCallback() {
super.connectedCallback();
this._person = await call_api();
}
render() {
return html`<div> ${this._person.name} </div>`;
}
}
APIクライアントの多くのケースで、コンポーネント呼び出し時にAPIレスポンスをセットアップします。
……
SeleniumはWebアプリケーションをE2Eテストするフレームワークです。
ブラウザをスクリプト操作することで、実機の利用環境に近いテストを実装できます。Javascriptのみのインテグレーションテストについては、
deno testがWebAssemblyやWeb Workersなどを含む高度なブラウザ標準もサポートして選択肢が増えましたが、Seleniumは適切なレンダリングをテストできる希少な手段と言えます。