docs: fix interpolations in https://www.fast.design/docs/fast-element/using-directives#host-directives

[engelsdamien]

🙋 Documentation Request

The first example in https://www.fast.design/docs/fast-element/using-directives#host-directives has a few typos:

const template = html<MyProgress>`
  <template (Represents my-progress element)
      role="progressbar"
      $aria-valuenow={x => x.value}
      $aria-valuemin={x => x.min}
      $aria-valuemax={x => x.max}>
    (template targeted at Shadow DOM here)
  </template>
`;

💁 Possible Solution

It should likely be:

const template = html<MyProgress>`
  <template (Represents my-progress element)
      role="progressbar"
      aria-valuenow=${x => x.value}
      aria-valuemin=${x => x.min}
      aria-valuemax=${x => x.max}>
    (template targeted at Shadow DOM here)
  </template>
`;

[EisenbergEffect]

Wow. Good catch. This was some documentation from the early version of fast-element when it was pre v1.0 and we were still thinking of using $ for attributes. Must have gotten missed when we updated things.

[janechu]

This is actively being worked on for the v2 docs for @microsoft/fast-element and has been addressed.