Proof of concept / strategy decision: Should we use Lit expressions to pass data from Storybook to our components?

[damontgomery]

Both our Lit components and storybook use the "html" function to convert a template string into a TemplateResult. This looks like "html``".

This allows us to pass data / configuration to Lit from storybook using expressions in Lit: https://lit.dev/docs/templates/expressions/.

Examples

myAttribute="${size}"
.myProperty="${size}"
?myBoolean="${isInteractive}"

Notes

These create different experiences in Storybook.

When you view the Chrome / Firefox inspector you will not see properties in the Elements tab since they are applied directly to the objects.

When you use attributes, these are reflected in the Elements tab and then Lit applies them to the properties.

The property passing is a way other elements or JS based code might set properties while the attributes is a way HTML or a CMS might set them. JS can also set attributes.

Questions

Do we want to use one consistently or are there rules on when to use either?

If there are a large number of attributes, does that make it difficult to read?

Is it confusing for a consumer to see the Elements without properties?

[damontgomery]

We don't use these expressions except to set booleans. This makes a consistent experience of what you see in the inspector in Chrome.

<example-component
  ?example-boolean=${args.exampleBoolean}
  example-string="${ifDefined(args.exampleString)}"
>
  ${unsafeHTML(args.exampleSlot ?? '')}
</example-component>

We define slots as strings, which lets them be editable in Storybook using.

argTypes: {
  exampleSlot: {
    name: 'slot="example-component--example"',
    description: 'The example slot.',
    table: {
      category: 'Slots',
    },
    control: { type: 'text' },
  },
}