Stimulus Outlet Names Must Match The Target Controller

Learnt a very import thing about Stimulus outlets this evening: the outlet name must match the controller name of the outlet target.  From the docs:

The outlet identifier in the host controller must be the same as the target controller’s identifier.

That is, if you have a controller with the name playfield:

<div data-controller="playfield" id="myElement">...</div>

Then any outlet that wants to use this controller also needs to be called playfield:

<div data-controller="keyboard"
     data-keyboard-playfield-outlet="#myElement">
...
</div>
<script type=“module”>
import { Controller } from “…";
Stimulus.register(“keyboard”, class extends Controller {
static outlets = [“playfield”];
});
</script>

If you do not do this, the outlet will not bind and you may find yourself struggling to work out why you can’t use any of the outlet methods. You may find yourself spending 30 minutes working with the debugger trying to find out whether the selector is not working, or whether the controller is not initialising properly, like I did last night.