Two more methods of tightly coupled component communication

ex1.html

<template>

  <!-- For this specific case, I recommend using a parent css selector. It has nothing to 
    do with Aurelia, mostly, but it's clean and performant. The isDropping property is set 
    through the drag event handlers on the row, similar to what you described with 
    isHoveringSection -->
  <style>
    dropzone { 
      display: none; 
    }
    .is-dropping dropzone {
      display: block;
    }
  </style>
  
  <row class="${isDropping ? '.is-dropping' : ''}" droppable>
    <field draggable droppable>
      <input />
      <dropzone />
    </field>
    <dropzone />
  </row>
  
</template>

ex2.html

<!-- In general, when you want to push data into a custom element or attribute, you
  would use a binding. When you want to pull data from a custom element or attribute,
  you would use ref. -->

<template>
  
  <map 
    points.bind="houses" 
    base-map.bind="selectedBase"
    view-model.ref="map" 
    draggable draggable.ref="drag">
  </map>
  
  <div class="row">
    <label>
      <input type="radio" name="base" value="road" checked.bind="selectedBase" />
      Road Map
    </label>
    <label>
      <input type="radio" name="base" value="arial" checked.bind="selectedBase" />
      Arial Map
    </label>
  </div>
  
  <input type="text" change.delegate="moveMap()" />
  
</template>

ex2.js

export class AppViewModel {

  points = [
    { lat: 80, lng: -30, name: 'Indian Ocean' }
  ];
  selectedBase = 'road';
  
  map; // this is the view model for the map custom element
  drag; // this is the view model for the draggable custom attribute
  
  // You can do anything you want with the view models above. Commonly,
  // you will want to access a function on the view model of the composed
  // element. Here we call map.moveTo. You are not limited to function
  // calls, however. This is just an object, and you can use it normally.
  moveMap(event) {
    let latLng = event.target.value.split(','); // assume we're getting 6.7912769,5.9814056
    this.map.moveTo(...latLng);
  }
}