意見
Stimulus Controllerは原則としてステートをDOMに持たせます。しかしDOM要素は属性だけでも数種類あります。どれを選択すれば良いかは容易ではありません
data-*-values
: これはStimulusが管理するValues
ステートです。*ValueChanged
コールバックが自動的に呼ばれます
data-*
属性にステートを保持することも可能ですが、せっかくならdata-*-values
を使った方が良いと私は思っていますaria-*
: これはどっちみちアクセシビリティの観点から必要とされているものです。またウィジェットごとに規格で決められているため、使い方に曖昧さがありません。名前の付け方も規格がありますので、悩みませんそれぞれメリットとデメリットがありますが、私の使用基準は下記のようになっています
value
の変更を画面に反映させる方法として、私は下記のいずれかを使います
value
の値を読み取り、画面の表示を変更します。画面表示のみ変更するときはこちらを使います*ValueChanged
コールバックを使用し、aria属性を変更します。そいてaria属性に対するCSS擬似セレクタを使ってaria属性を読み取り、画面の表示を変更します。アクセシビリティのためにaria属性の変更も必須なケースはこちらを選択しますvalue
の値を読み取り、画面の表示を変更しますStimulus Controllerは原則としてステートをDOMに持たせるのですが、かなり自由度があります。またTailwind CSSを使うか、BEMを使うかによって扱うCSSクラスの数が劇的に変わりますので、そこも判断に影響します。
その中でも私の場合は上記のルールにしたがって、どのようなDOM要素にステートを持たせるかを判断しています。私が個人的にTailwind CSSを多く使っていることにも影響されていると思いますが、概ねCSS classを直接書き換えずに、data-*-values
のValuesステートを使う方向に持っていきます。