fix: builtin custom elements check when transforming attributes (#2824)

* Fix builtin custom elements check when transforming attributes

* Fix lint issue

Author: edoardocavazza

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();

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 = () => {

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`,});}

packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/input.svelte

@@ -0,0 +1 @@
+<div is="custom-element" camelCase="true" kebab-case="true" PascalCase="true" snake_case="true" />