# Are recursive controllers explicitly supported?

**URL:** <https://discuss.hotwired.dev/t/are-recursive-controllers-explicitly-supported/421>\
**Category:** General\
**Created:** [September 6, 2018, 2:22pm UTC](https://discuss.hotwired.dev/t/are-recursive-controllers-explicitly-supported/421 "2018-09-06T14:22:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![alinnert](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/alinnert/32/364_2.png) [@alinnert](https://discuss.hotwired.dev/u/alinnert)\
**Post date:** [September 6, 2018, 2:22pm UTC](https://discuss.hotwired.dev/t/are-recursive-controllers-explicitly-supported/421/1 "2018-09-06T14:22:50Z")

</div>

I’m currently evaluating if Stimulus works for a current project and I wondered if it’s possible to use controllers recursively. E. g. for nested collapsible widgets (click on the header and the body shows or hides).

Here’s my current test implementation:

html code:

```
<div data-controller="collapsible">
  <div data-action="click->collapsible##toggleBody">Outer Collapsible</div>
  <div data-target="collapsible.body">
    <div>Outer Content</div>
    <div data-controller="collapsible">
      <div data-action="click->collapsible##toggleBody">Inner Collapsible</div>
      <div data-target="collapsible.body">
        <div>Inner Content</div>
      </div>
    </div>
  </div>
</div>

```

js code:

```
import { Controller } from '@stimulus/core'

export default class extends Controller {
  static get targets () {
    return ['body']
  }

  toggleBody () {
    this.bodyTargets.forEach(it => it.classList.toggle('show'))
  }
}

```

And, surprise: it works exactly as expected! The outer collapsible triggers **only** the outer content. Same for the inner ones.

Now I’d like to know if this is intended behaviour and officially supported or if this just works because I’m very lucky here. I can’t find any information about this kind of usage.

---

<div class="post-metadata">

**Author:** ![javan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/javan/32/594_2.png) [@javan](https://discuss.hotwired.dev/u/javan)\
**Post date:** [September 6, 2018, 2:46pm UTC](https://discuss.hotwired.dev/t/are-recursive-controllers-explicitly-supported/421/2 "2018-09-06T14:46:28Z")

</div>

> [@alinnert](#):
>
> Now I’d like to know if this is intended behaviour and officially supported or if this just works because I’m very lucky here.

Officially supported! And also not very well documented. Each controller has its own [_scope_](https://stimulusjs.org/reference/controllers#scopes), which isolates it from others even when nested.

---

<div class="post-metadata">

**Author:** ![alinnert](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/alinnert/32/364_2.png) [@alinnert](https://discuss.hotwired.dev/u/alinnert)\
**Post date:** [September 6, 2018, 3:17pm UTC](https://discuss.hotwired.dev/t/are-recursive-controllers-explicitly-supported/421/3 "2018-09-06T15:17:56Z")

</div>

Okay, this is really nice. Thank you.

---

<div class="post-metadata">

**Author:** ![sam](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/sam/32/1091_2.png) [@sam](https://discuss.hotwired.dev/u/sam)\
**Post date:** [September 6, 2018, 4:56pm UTC](https://discuss.hotwired.dev/t/are-recursive-controllers-explicitly-supported/421/4 "2018-09-06T16:56:44Z")

</div>

We call these _nested scopes_, and to echo what @javan says, they’re [explicitly supported](https://github.com/stimulusjs/stimulus/blob/master/packages/%40stimulus/core/test/cases/target_tests.ts#L41-L45) but not yet documented. I haven’t figured out how to explain them yet!

---

<div class="post-metadata">

**Author:** ![alinnert](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/alinnert/32/364_2.png) [@alinnert](https://discuss.hotwired.dev/u/alinnert)\
**Post date:** [September 9, 2018, 5:38pm UTC](https://discuss.hotwired.dev/t/are-recursive-controllers-explicitly-supported/421/5 "2018-09-09T17:38:41Z")

</div>

This might bring up another question I already had in mind: What’s the name of that part of the HTML that contains the `data-controller` attribute? If you can name that you could explain it as simply as “You can nest XY.”. Or maybe “You can nest elements bound to the same controller.” would be just fine. But a name for said HTML fragments would still me helpful in some situations. Currently I’d call it “That element that has the `data-controller` attribute” which is rather long. But I don’t think that “template” or “component” are good names here.

---

<div class="post-metadata">

**Author:** ![andreimoment](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/andreimoment/32/486_2.png) [@andreimoment](https://discuss.hotwired.dev/u/andreimoment)\
**Post date:** [October 4, 2019, 9:58pm UTC](https://discuss.hotwired.dev/t/are-recursive-controllers-explicitly-supported/421/6 "2019-10-04T21:58:41Z")

</div>

@alinnert “Controller scope definition”?

By the way, just defined nested controller scopes for forms with radio button (Yes/No) and dropdown (extra field for “other”) dependencies and absolutely love the design.

---

<div class="post-metadata">

**Author:** ![OutlawAndy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/outlawandy/32/2876_2.png) [@OutlawAndy](https://discuss.hotwired.dev/u/OutlawAndy)\
**Post date:** [December 11, 2020, 7:46pm UTC](https://discuss.hotwired.dev/t/are-recursive-controllers-explicitly-supported/421/7 "2020-12-11T19:46:20Z")

</div>

Late to this party, but responding to your statement about terminology regarding the HTML element containing the `data-controller` attribute… In the handbook they are referred to individually as the _controller’s element_. So I’ve been referring to them generally as _controller elements_. Not sure if there is an official term, but I agree with you that naming things makes discussion easier.