[email protected] @Prop observers dont match documentation

[wjaspers]

When I create a child component, the @Prop({attribute: 'overridden-attribute-name'}) isn't observed by the component as expected, causing stencil's element reuse feature to refuse a repaint.

Failing example:

export class Person () {
  constructor(public readonly isUsingStencil: boolean = false) {}
}

@Component({tag: 'parent-component'})
export class ParentComponent() {
private observedPerson: Person;

constructor() {
  this.observedPerson = new Person(false);

  // Wait 5 seconds, then update the person reference
  setTimeout(() => {
       this.observedPerson = new Person(true);
  }, 5000);
}

render() {
  <div>
     <child-component overridden-attribute-name={this.observedPerson} />
  </div>
}
}

@Component({tag: 'child-component', shadow: false})
export class ChildComponent() {
  @Prop({ attribute: 'overridden-attribute-name' }) person: Person;
  
  render() {
     if (this.person.isUsingStencil) {
        return ( <span>It looks like they use stencil</span> );
     }

     return ( <span>Consider switching to stencil</span> );
   }
}

Working example:

export class Person () {
  constructor(public readonly isUsingStencil: boolean = false) {}
}

@Component({tag: 'parent-component'})
export class ParentComponent() {
private observedPerson: Person;

constructor() {
  this.observedPerson = new Person(false);

  // Wait 5 seconds, then update the person reference
  setTimeout(() => {
       this.observedPerson = new Person(true);
  }, 5000);
}

render() {
  <div>
     <child-component person={this.observedPerson} />
  </div>
}
}

@Component({tag: 'child-component', shadow: false})
export class ChildComponent() {
   // NOTE: The attribute name HAS to match or render() wont be called again.
  @Prop({ attribute: 'person' }) person: Person;
  
  render() {
     if (this.person.isUsingStencil) {
        return ( <span>It looks like they use stencil</span> );
     }

     return ( <span>Consider switching to stencil</span> );
   }
}