fix: Observed property changes not reflected in attribute values

[SSheehan-MS]

🐛 Bug Report

Attributes won't reflect some observable changes.

💻 Repro or Code Sample

A class/template with something like:

class X {
@observable a: bool = false;
@observable b: bool = false;

get aandb(): boolean {
  return this.a && this.b;
}

// Workaround
get aandb_workaround(): boolean {
  let a = this.a;
  let b = this.b;
  return a && b; // Works!
}
} // end class X

Template:
<div attr="${(x) => x.aandb}">
  ${(x) => { if (a && b) { 'yes' } else { 'no' }}
</div>

Observed: The attribute value will never change if a & b are changed. The text content of the div will update. (So it seems specific to the attribute handling).

🤔 Expected Behavior

Changing b (in repro) should cause attribute value to update.

😯 Current Behavior

The attribute value doesn't reflect changes in the observed properties.

💁 Possible Solution

Workaround: see repro above.

🔦 Context

Might be related to this: https://github.com/microsoft/fast/issues/7035

🌍 Your Environment

2.4.1, Edge

[janechu]

This is intentional, if attribute reflection should happen, this should use @attr decorator. The @observable decorator is only for properties on the class. Can you specify your use case further, is there a reason for not using @attr?

[SSheehan-MS]

This is intentional, if attribute reflection should happen, this should use @attr decorator. The @observable decorator is only for properties on the class. Can you specify your use case further, is there a reason for not using @attr?

We weren't aware this was required here. 'a' and 'b' aren't directly attributes, they do "contribute" to an attribute though.