Aurelia Custom Elements Inside of Custom Elements & Sharing Variables

Question

How do I access & share variables between custom elements? I have the following files...

tip.html

<template>
    <div class="tip-container">
        <content select="tip-trigger"></content>
        <content select="tip-content"></content>
    </div>
</template>

tip.js

export class Tip {}

tip-trigger.html

<template>
    <span class="tip-trigger" click.trigger="showTip()">
        <content></content>
    </span>
</template>

tip-trigger.js

export class TipTrigger {
    showTip() {
        console.debug(this);
    }
}

tip-content.html

<template>
    <span class="tip">
        <content></content>
        <span class="tip__close  tip__close--default">×</span>
        <span class="tip__color"></span>
    </span>
</template>

tip-content.js

export class TipContent {}

In my Tip class I would like to have a variable name visible. When showTip is triggered visible would be set to true, which I would then use to add a class in tip-content.html. How can I share variables between these custom elements to do this?

The idea is to create an element to show tip pop-ups where any type of content can be the trigger and any type of content can be displayed when triggered. Basic example:

<tip>
  <tip-trigger><button>?</button></tip-trigger>
  <tip-content><div>Here is some helpful info...</div></tip-content>
</tip>

Answer 1

Here is a solution to your problem in Plunker.

Note that the tip-trigger and tip-content elements are just replaceable parts of the template. They don't needed to be components themselves (that confused me a lot in the "original" custom elements article).

app.html:

<template>
  <require from="tip"></require>
  <tip>
      <tip-trigger><button>?</button></tip-trigger>
      <tip-content><div>Here is some helpful info...</div></tip-content>
  </tip>
</template>

tip.html:

<template>
    <div class="tip-container">
      <div>
         <div click.trigger="showContent()">
           <content select="tip-trigger"></content>
         </div>
      </div>
      <div show.bind="contentVisible">
        tip content:
        <content select="tip-content"></content>
      </div>
    </div> 
</template>

tip.js:

export class Tip {
  showContent(){
    this.contentVisible = !this.contentVisible;
  }
}