Stimulus: Embedded script tags prevent target detection

[javan]

Can you share a complete snippet of HTML that illustrates the problem, please?

[Aesthetikx]

@javan This should do it, sorry for the messy js
https://gist.github.com/Aesthetikx/e7b2438f9ed31e269489af9ef9235bc6

[javan]

Confirmed! Looks like it happens when the controller is registered before the document is complete and there are still inline <script>s to process. Stimulus returns the same (two) elements as querySelectorAll so it's not a bug with the Targets API:

connect() {
  // Both log the same elements
  console.log(this.itemTargets)
  console.log(this.element.querySelectorAll("[data-target='hello.item']"))
}

That said, I think Stimulus can probably help avoid this timing issue. In the meantime, you can avoid it by either:

1. Moving your Stimulus setup <script> to the end of the document before </body>
2. Moving it into a .js file loaded with <script defer> or <script async>
3. Registering controllers when the DOM is ready or even deferring briefly:
   ```js
   addEventListener("DOMContentLoaded", event => {
   application.register("hello", controller)
   })

// Or:

setTimeout(() => {
application.register("hello", controller)
}, 1)
```
Thanks for the report!

[david-a-wheeler]

Clearly this should be documented. In real code, you really should put the script in a separate file and not inside the HTML in the first place.

[Spone]

I ran into this issue while using https://github.com/ankane/chartkick which outputs the javascript inline by default. Can you release the patch?