Why don't Stimulus Outlets use controller identifiers?

1

The new Outlets feature looks like a great addition to Stimulus.

To me, a relative newcomer to Stimulus, it seems so obvious that the selection should be done using the controller identifier instead of CSS selector.

<div id="results">
  <div class="result" data-controller="result">...</div>
  <div class="result" data-controller="result">...</div>
  ...
</div>

<!-- from the docs -->
<div data-controller="search" data-search-result-outlet=".result">

<!-- why not simply -->
<div data-controller="search" data-search-result-outlet="result">

This would obviate the need to create a CSS class and ensure that there’s never a mismatch (e.g., class="result" data-controller="results").

The only reason I can think of for using CSS selectors is that they may be more performant for Stimulus:

document.querySelectorAll('.results') // might be faster than
document.querySelectorAll('[data-controller="results"]')

Can someone please enlighten me about this design choice?

2 Likes
2

[data-controller="results"] is pretty much as fast as a class, and I suspect Marco (the author of the PR) used a class selector in his selector for familiarity.

But a controller name instead of a selector has this drawback: you can’t specify a unique ID when you’d like to point to a specific instance for your usage. e.g. data-search-result-outlet="#domid-of-the-outlet"

I think that’s the reasoning. Thoughts?

3

True, but you could do the filtering inside the controller:

this.someOutlets.filter(ctrl => ctrl.element.matches('.whoopiedoo');

Since ...-outlet="[data-controller=&quot;results&quot;]" is an option, I guess that settles it.

Merci beaucoup!

1 Like
4

Somebody correct me if I’m wrong but I don’t think you actually have to use a class. The docs say a CSS selector and indeed the example given is a class but I don’t think that is a requirement. You can use any attribute or combination thereof I would presume as long as it is a valid CSS selector.

1 Like