support inner: true on JS functions

[SteffenDE]

Sometimes it makes sense to only target elements inside of the source element when using JS functions. One example:

~H"""
<.button phx-click={JS.dispatch("click", to: "a", inner: true)}>
  <.link navigate={~p"/posts/new"}>New Post</.link>
</.button>
"""

without inner: true you could only sanely target the inner link by giving it a unique id. This PR adds inner: true as an option to all JS function that accept the :to option, allowing the selector to only target elements inside the source element.

Wdyt?

[greven]

I like this. In my current project since I'm using plain CSS I just add button classes to the link instead of composing a .button with .link inside, but this is a cleaner solution than using an id. 👌

[rktjmp]

I did a PR for this kind of idea a while ago, where you would instead give a tuple, {target, scope} selector which meant you could do something similar to this, but also raise up to a container. Eg: you could have your button click "go up" to the nearest .list parent, then down to the nearest .delete button. Then you could have as many .list's without having to generate unique ids for every combination of context * action * object and better make components self-contained.

Not sure if something like that is worth considering, having a way to go up-down and this-down.

#2493

[SteffenDE]

Superseded by #3433

[chrismccord]

Note, main now supports to: {:inner, "a"} and to: {:closest, "tr"} for js commands. Thanks!