Feature Idea - :ancestor action option

[NakajimaTakuya]

There are many cases where a child element wants to listen to events of its ancestor element and act on them.
In such cases, it is common to use @document or @window.
However, it is often necessary to care whether or not the event was originated by its own ancestor.
How about providing some assurance of that in the action option?
If it looks good I will make a PR.

code (Code that reproduces the function using registerActionOption)

app.registerActionOption('ancestor', ({ event, element }) => {
  return event.target.contains(element);
});

syntax:

data-action="disclousre:open@document->content-loader#load:ancestor:once"

example:

https://codepen.io/Takuya-Nakajima/pen/eYQbVwa?editors=1010

usecase:

This helps to keep controllers healthy that are used as descendant elements of a generic controller.

For example, suppose we have a modal that displays a map. This is very useful when you want to load the map when the modal is opened, and when you want to reset the center location when the map is closed.

<div ... data-controller="modal">
  <div ... data-controller="map"
    data-action="modal:open@document->map#load:ancestor:once modal:close@document->map#resetCenter:ancestor"
  />
</div>

It is easy to imagine more than one modal controller on a page.
In such a case, it is very convenient to use a global listener for only the ancestor of the map.