Estamos tratando de crear una guía de diseño con lit y queremos usar un libro de cuentos para documentar nuestros componentes. Aquí hay una historia de ejemplo (en formato mdx) que uso:

 import { html } from 'lit'; import { Canvas, Story } from '@storybook/addon-docs'; import './gr-button'; export const Template = (args) => html`<gr-button ?secondary=${args.variant === 'secondary'} ?disabled=${args.disabled} ?block=${args.block} ?medium=${args.size === 'medium'} ?small=${args.size === 'small'}>${args.label}</gr-button>`; <Canvas columns={1}> <Story name="Secondary Block disabled button" args={{ disabled: true, variant: 'secondary', block: true, label: 'Fill the form' }}> {Template.bind({})} </Story> </Canvas>

Y aquí el resultado que muestra Storybook en el panel "Mostrar código" en la interfaz de usuario:

 <gr-button secondary="" disabled="" block=""><!--?lit$754556085$-->Fill the form</gr-button>

¿Alguien sabe cómo deshacerse de los valores vacíos para los atributos booleanos y esa etiqueta de comentario iluminada?