Add ability to set UJS handlers on a different HTML element.

[jho406]

Superglue brings back UJS handers to Rails. In superglue they often look like this

<a href={"/posts"} data-sg-remote>

They're very convenient and adds SPA functionality without the complexity of javascript. Its behavior is overridable in your application_visit.js that gets generated when you start a new superglue project so you can handle all your edge cases.

In superglue, its installed on the same appEl in application.js, also generated into your project.

superglue/superglue_rails/lib/install/templates/web/application.js

Line 31 in 091c076

appEl={appEl}

The appEl also gets passed internally to superglue's ApplicationBase (your application.js overrides this) here:

superglue/superglue/lib/index.js

Line 158 in 091c076

const { appEl } = this.props

where the event listeners are added to appEl immediately after that.

    appEl.addEventListener('click', onClick)

In other words, the UJS handers only listen on the appEl, which when considering some component libraries uses react portals to build modals or dropdowns, means that UJS doesn't work on those components because they exist outside the appEl. I'd like to see superglue optionally support passing a custom element to put the listeners on. It can be as simple as allowing a subclass of of ApplicationBase to more easily override. For example:

class Application extends ApplicationBase {
   ujsElement () {
  }

In that scenario `ApplicationBase` would need to define its ujsElement as defaulting to the `appEl` that gets passed to it.