AlaskaAirlines / auro-avatar

Custom element for the purpose of displaying an avatar image.
https://auro.alaskaair.com/components/auro/avatar
Apache License 2.0
1 stars 0 forks source link

auro-avatar: 'type' attribute does not work normally in Svelte #26

Closed MattSidor closed 1 year ago

MattSidor commented 2 years ago

Describe the bug

The type attribute, when declared in the JSX, does not get applied in Svelte because the attribute does not have reflect: true set on its LitElement property.

To Reproduce

When we try to set the attribute in Svelte within the JSX, the attribute doesn't get applied when the component is rendered:

<script>
  import '@aurodesignsystem/auro-avatar';
</script>

<auro-avatar 
  code="SEA"  // this works
  type="md"   // this does not work
/>

Expected behavior

Setting the attribute in the JSX should work.

Additional context

Our workaround, as described by @geoffrich in this CSS-Tricks article, is to use a Svelte action to forcefully set the attribute:

<script>
  import '@aurodesignsystem/auro-avatar';

  function setAvatarTypeAttribute(node) {
    node.setAttribute('type', 'md');
  };
</script>

<auro-avatar 
  code="SEA"
  use:setAvatarTypeAttribute
/>

We have to do this in Svelte for every Lit element attribute that does not have reflect: true configured on it.