support for custom elements in jsx

unyt-org · Feb 6, 2024 · b462412 · b462412
1 parent 15d2d23
commit b462412
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/attributes.ts b/attributes.ts
@@ -58,11 +58,11 @@ export type validHTMLElementAttrs<El extends HTMLElement> = {
 
 export type validHTMLElementSpecificAttrs<TAG extends string> = TAG extends keyof typeof htmlElementAttributes ? {
 	[key in (typeof htmlElementAttributes)[TAG][number]]: TAG extends keyof htmlElementAttributeValues ? (key extends keyof htmlElementAttributeValues[TAG] ? htmlElementAttributeValues[TAG][key] : string) : string
-} : Record<string, unknown>;
+} : Record<string, never>;
 
 export type validSVGElementSpecificAttrs<TAG extends string> = TAG extends keyof typeof svgElementAttributes ? {
 	[key in (typeof svgElementAttributes)[TAG][number]]: TAG extends keyof svgElementAttributeValues ? (key extends keyof svgElementAttributeValues[TAG] ? svgElementAttributeValues[TAG][key] : string) : string
-} : Record<string, unknown>;
+} : Record<string, never>;
 
 
 

diff --git a/datex-bindings/dom-utils.ts b/datex-bindings/dom-utils.ts
@@ -281,8 +281,10 @@ export class DOMUtils {
         // valid attribute name?
         // not an HTML attribute
         if (!(
+            // if one of the following is true, the attribute is added
             attr.startsWith("data-") ||
             attr.startsWith("aria-") ||
+            element.tagName.includes("-") || // is custom element
             defaultElementAttributes.includes(<typeof defaultElementAttributes[number]>attr) || 
             elementEventHandlerAttributes.includes(<typeof elementEventHandlerAttributes[number]>attr) ||
             (<readonly string[]>htmlElementAttributes[<keyof typeof htmlElementAttributes>element.tagName.toLowerCase()])?.includes(<typeof htmlElementAttributes[keyof typeof htmlElementAttributes][number]>attr) ||

diff --git a/jsx/jsx-definitions.ts b/jsx/jsx-definitions.ts
@@ -70,7 +70,8 @@ declare global {
 			// svg elements
 			& {
 				readonly [key in keyof SVGElementTagNameMap]: _IntrinsicAttributes<HTMLElementTagNameMap[key]> & {children?: childrenOrChildrenPromise|childrenOrChildrenPromise[]} & htmlAttrs<validSVGElementSpecificAttrs<key>, true>
-			} 
+			}
+			& Record<`${string}-${string}`, {children?: childrenOrChildrenPromise|childrenOrChildrenPromise[], [key: string]: unknown}> // allow custom elements
 			// other custom elements
 			& {
 				'shadow-root': {children?: childrenOrChildrenPromise|childrenOrChildrenPromise[]} & {mode?:'open'|'closed'}