Getting parent controller from within child

10

Dispatching custom events is a good way of triggering actions in one controller from another. However, in this case I am trying to grab certain properties of the parent controller, for instance:

this.parentThing = this.element.closest('.thing').controller;

// Grab a value
let someProperty = this.parentThing.propertyValue;

// Grab a property belonging to a target belonging to the parent:
let someText = this.parentThing.titleTarget.innerText;

I think the main use case here is when you have a parent that contains values that apply to all of the underlying child elements. Something like:

<ul data-controller="medialist" data-medialist-type-value="music">
  <li data-controller="mediaitem" data-action="click->mediaitem#submit">Rock 'n Roll</li>
  <li data-controller="mediaitem" data-action="click->mediaitem#submit">Soul</li>
  <li data-controller="mediaitem" data-action="click->mediaitem#submit">8 bit Gameboy generated funk</li>
</ul>

This is a silly example but just to illustrate the use case. Imagine clicking on the li triggers a process where something is submitted to the backend, and we need to include the “type=music” value from its parent in the request.

Outlets seem like an approach to this but only working from the parent down to the children, not the other way around. Unless I am missing something?