New best practice: event dispatching

[geoffrich]

It is a good practice to dispatch events from components after rendering has completed, so that the event's listeners see the fully rendered state of the component. To do so, you can await the updateComplete Promise before firing the event.
-- Lit docs

We ran into this issue with the valuetile. Code was listening to the fareClick event and expecting the attribute to be set. However, the attribute was not set until after updateComplete.

Code example from Lit docs:

async _loginClickHandler() {
  this.loggedIn = true;
  // Wait for `loggedIn` state to be rendered to the DOM
  await this.updateComplete;
  this.dispatchEvent(new Event('login'));
}

Reference PR for the discovery of the use case
https://github.com/AlaskaAirlines/auro-valuetile/pull/31

[geoffrich]

We should also mention that you should only await update complete after completing all the property updates.

// INCORRECT
// do something
await this.updateComplete
// do more things
this.dispatchEvent

// CORRECT
// do something
// do more things
await this.updateComplete
this.dispatchEvent

[blackfalcon]

This issue is bound to AlaskaAirlines/auro-radio#26

[blackfalcon]

I have a feeling that we are doing this with the latest versions of new components. @jason-capsule42 can you validate? And if we are, let's document this pattern as a 'best practice' for new developer onboarding.