fix(interact): make custom element layout transparent

packages/interact/src/web/defineInteractElement.ts

@@ -1,6 +1,22 @@
 import { getInteractElement } from './InteractElement';
 
+export const INTERACT_ELEMENT_STYLE_ID = 'wix-interact-element-default-style';
+
+function ensureInteractElementStyle() {
+  if (typeof document === 'undefined' || document.getElementById(INTERACT_ELEMENT_STYLE_ID)) {
+    return;
+  }
+
+  const style = document.createElement('style');
+  style.id = INTERACT_ELEMENT_STYLE_ID;
+  style.textContent = 'interact-element { display: contents; }';
+
+  (document.head ?? document.documentElement).append(style);
+}
+
 export function defineInteractElement() {
+  ensureInteractElementStyle();
+
   if (!customElements.get('interact-element')) {
     const interactElement = getInteractElement();
     customElements.define('interact-element', interactElement);

packages/interact/test/web.spec.ts

@@ -2,6 +2,7 @@ import type { MockInstance } from 'vitest';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Interact, remove } from '../src/web';
 import { addListItems } from '../src/core/add';
+import { INTERACT_ELEMENT_STYLE_ID } from '../src/web/defineInteractElement';
 import type { InteractConfig, ScrubEffect, IInteractElement, TriggerType } from '../src/types';
 import type { NamedEffect } from '@wix/motion';
 import { effectToAnimationOptions } from '../src/handlers/utilities';
@@ -475,6 +476,18 @@ describe('interact (web)', () => {
       Interact.create({} as InteractConfig, { useCustomElement: true });
       expect(customElements.get('interact-element')).toBeDefined();
     });
+
+    it('should register a layout-transparent default style for interact-element', () => {
+      document.getElementById(INTERACT_ELEMENT_STYLE_ID)?.remove();
+
+      Interact.create({} as InteractConfig, { useCustomElement: true });
+      Interact.create({} as InteractConfig, { useCustomElement: true });
+
+      const styles = document.querySelectorAll(`#${INTERACT_ELEMENT_STYLE_ID}`);
+
+      expect(styles).toHaveLength(1);
+      expect(styles[0]?.textContent).toBe('interact-element { display: contents; }');
+    });
   });
 
   describe('destroy Interact instance', () => {