fix(dom-renderer): use setAttribute for kebab-case data keys

src/core/dom-renderer/domRenderer.ts

@@ -35,7 +35,7 @@
 } from './domRendererUtils.js';
 
 // Feature detection for legacy brousers
 const _styleRef: any =
   typeof document !== 'undefined' ? document.documentElement?.style || {} : {};
 
 const supportsObjectFit: boolean = 'objectFit' in _styleRef;
@@ -109,7 +109,7 @@
     for (const prop in task.propsEnd) {
       const start = task.propsStart[prop]!;
       const end = task.propsEnd[prop]!;
       (task.node.props as any)[prop] = interpolateProp(prop, start, end, t);
     }
 
     updateNodeStyles(task.node);
@@ -134,7 +134,7 @@
 
   constructor(
     public node: DOMNode,
     props: Partial<lng.INodeAnimateProps<any>>,
     rawSettings: Partial<lng.AnimationSettings>,
   ) {
     this.settings = {
@@ -152,7 +152,7 @@
 
     for (const [prop, value] of Object.entries(props)) {
       if (value != null && typeof value === 'number') {
         this.propsStart[prop] = (node.props as any)[prop];
         this.propsEnd[prop] = value;
       }
     }
@@ -214,7 +214,7 @@
 
 function animate(
   this: DOMNode,
   props: Partial<lng.INodeAnimateProps<any>>,
   settings: Partial<lng.AnimationSettings>,
 ): lng.IAnimationController {
   return new AnimationController(this, props, settings);
@@ -1232,7 +1232,11 @@
     if (keyValue === undefined) {
       node.div.removeAttribute('data-' + key);
     } else {
-      node.div.dataset[key] = String(keyValue);
+      // dataset[key] requires key to already be camelCase (DOMStringMap rejects hyphenated
+      // property names outright, e.g. "section-id" -- SyntaxError: not a valid property
+      // name). Our data props are passed as data-attribute-style keys (kebab-case), so use
+      // setAttribute directly instead, consistent with the removeAttribute branch above.
+      node.div.setAttribute('data-' + key, String(keyValue));
     }
   }
 }