Stimulusにはあまり知られてませんがスコープの概念があります。
ドキュメントにも少し記述があります。
しかしこの辺はドキュメントで語り切れてない挙動もあってちょくちょく本家にissueがたつのでその辺の解説をしようと思います。
スコープの範囲
コントローラを適応した要素以下子孫全体になります。
しかし、同名のコントローラをネストした場合、その子孫側のコントローラのスコープは親側のコントローラのスコープの範囲外になります。
ゆえに子側のコントローラのスコープにあるTargetは親側のコントローラでは参照できません。
試しにその条件でtargetの数を計算するコードを用意してみました。
See the Pen Qiita_stimulus_scope_1 by nazomikan (@nazomikan) on CodePen.
親側のtestコントローラからみるとitemターゲットは一見6つに見えますが、前述の理由で子側のtestコントローラのスコープが範囲外となるので3個ということになります。
アクションにもスコープの概念は適用される
ターゲットについてはドキュメントでも触れられてるので読んでいればわかるのですが、action周りにもこのスコープの影響があることはあまり知られていません。
同名のコントローラがネストされてる場合、子側で発生したイベントは親側のdata-actionとしては処理されません。
以下に再現コードを用意しました。
See the Pen Qiita_stimulus_scope_1 by nazomikan (@nazomikan) on CodePen.
子コントローラのスコープに書かれたdata-actionにはtestコントローラのupdateAnswerメソッドが指定されてるので一見親のtestも動きそうですが、これも前述の通り子コントローラのスコープが親スコープの範囲外として扱われるため処理されません。
バブリングもスルーされる
最後にややトリッキーな動き。
同名のコントローラをネストした場合、その子孫側のコントローラのスコープで発生したイベントは、バブリング可能なイベントであっても親側のアクションをそれをキャッチすることはできません。
以下の例はボタンをクリックした際に発生するクリックイベントのバブリングに期待して親コントローラ側にアクションを設定している例です。
See the Pen Qiita_stimulus_scope_2 by nazomikan (@nazomikan) on CodePen.
クリックイベントはバブリング可能なので一見親側までイベントが届いて親のアクションが動きそうですが実際には動きません。
これは前述のアクションにおけるスコープの動きをEvent.targetの所在地から判断してるためで、こちらも仕様です。