diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts index 8a4221b88..3f44c6a05 100644 --- a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts +++ b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts @@ -113,7 +113,7 @@ export function handleAttribute( if ( !preserveCase && !svgAttributes.find((x) => x == name) && - !(element instanceof Element && element.tagName.includes('-')) && + !(element instanceof Element && element.isCustomElement()) && !(svelte5Plus && name.startsWith('on')) ) { return name.toLowerCase(); diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts index bd8947c64..84ba4bb9b 100644 --- a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts +++ b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts @@ -255,6 +255,20 @@ export class Element { } } + isCustomElement(): boolean { + if (this.tagName.includes('-')) { + return true; + } + if ( + this.node.attributes + ?.find((a: BaseNode) => a.name === 'is') + ?.value[0]?.data.includes('-') + ) { + return true; + } + return false; + } + private getStartTransformation(): TransformationArray { const createElement = `${this.typingsNamespace}.createElement`; const addActions = () => { diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/expectedv2.js new file mode 100644 index 000000000..615ef7551 --- /dev/null +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/expectedv2.js @@ -0,0 +1 @@ + { svelteHTML.createElement("div", { "is":`custom-element`,"camelCase":`true`,"kebab-case":`true`,"PascalCase":`true`,"snake_case":`true`,});} diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/input.svelte new file mode 100644 index 000000000..f5f7b1b8d --- /dev/null +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/input.svelte @@ -0,0 +1 @@ +