Feature Request
The html tagged template from @figma/code-connect/html lowercases tag names that match native HTML elements (e.g., <Select>, <Textarea>), while custom element names like <TextField> preserve their PascalCase.
For frameworks like Svelte and Vue, <Select> and <select> are semantically different — the former is a component, the latter is a native element.
Current output: <select bind:value />
Desired output: <Select bind:value />
Note: Non-native tag names like <TextField> correctly preserve PascalCase.
Use Case
We use Code Connect with parser: "html" and label: "Svelte" for our Svelte 5 design system. Components named Select and Textarea display as native HTML elements in the Dev Mode code panel, which is confusing for developers.
Environment
@figma/code-connect v1.4.2figma.config.json: { "parser": "html", "label": "Svelte" }
Feature Request
The
htmltagged template from@figma/code-connect/htmllowercases tag names that match native HTML elements (e.g.,<Select>,<Textarea>), while custom element names like<TextField>preserve their PascalCase.For frameworks like Svelte and Vue,
<Select>and<select>are semantically different — the former is a component, the latter is a native element.Current output:
<select bind:value />Desired output:
<Select bind:value />Note: Non-native tag names like
<TextField>correctly preserve PascalCase.Use Case
We use Code Connect with
parser: "html"andlabel: "Svelte"for our Svelte 5 design system. Components namedSelectandTextareadisplay as native HTML elements in the Dev Mode code panel, which is confusing for developers.Environment
@figma/code-connectv1.4.2figma.config.json:{ "parser": "html", "label": "Svelte" }