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
/>
Describe the bug
The
type
attribute, when declared in the JSX, does not get applied in Svelte because the attribute does not havereflect: 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:
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:
We have to do this in Svelte for every Lit element attribute that does not have
reflect: true
configured on it.