Where are the appearanceChanged and defaultSlottedContentChanged lifecycle methods documented?

[logan2z]

I see these being used in the @fast/web-components implementation (eg. the anchor component), but I don't see them mentioned anywhere in the documentation. Are there other lifecycle methods available to component implementors that are also not yet documented?

[KingOfTac]

The methods you're referring to aren't lifecycle methods that are available to every component, rather they can be optionally added to respond to changes to any @attr and @observable decorated properties on the component.

The shape these methods take is [property_name]Changed and they take two arguments for the previous value of the property and the new value.

A concrete example using the latest fast-element beta.

import { customElement, html, slotted, elements, FASTElement } from '@microsoft/fast-element';

@customElement({
  name: 'my-list',
  template: html<List>`
    <h3>${x => x.heading}</h3>
    <ul>
      <slot
        ${slotted({ property: 'slottedItems', filter: elements('[role="listitem"]') })}
      ></slot>
    </ul>
  `
})
class List extends FASTElement {
  @attr
  public heading: string = '';
  protected headingChanged(previous: string, next: string): void {
    console.log(`heading changed from ${previous} to ${next}`);
  }

  @observable
  public slottedItems!: HTMLElement[];
  protected slottedItemsChanged(previous: HTMLElement[], next: HTMLElement[]): void {
    console.log(`slottedItems changed from ${previous} to ${next}`);
  }
}

In the example above headingChanged will be called any time the heading attribute changes on the my-list element.
The slottedItemsChanged method will be called any time the elements slotted into the default slot of the component has changed, as long as the slotted elements have a role of listitem because the slotted directive is filtering on that attribute.