fix(widget-element): fix multiple definition of a custom element

rambler-digital-solutions · Aug 15, 2024 · 3ae2ce5 · 3ae2ce5
1 parent e3c6e7d
commit 3ae2ce5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/widget-element/index.test.ts b/packages/widget-element/index.test.ts
@@ -34,6 +34,15 @@ class TestWidgetWithFallback extends TestWidget {
 TestWidget.register('test-widget')
 TestWidgetWithFallback.register('test-widget-fallback')
 
+test('register custom element once', () => {
+  expect(customElements.get('test-widget')).toBe(TestWidget)
+
+  // NOTE: try register multiple times
+  TestWidget.register('test-widget')
+
+  expect(customElements.get('test-widget')).toBe(TestWidget)
+})
+
 test('widget is ready', async () => {
   const widget = document.createElement('test-widget') as TestWidget
   const onReady = jest.fn()

diff --git a/packages/widget-element/index.ts b/packages/widget-element/index.ts
@@ -65,7 +65,10 @@ export class WidgetElement extends HTMLElement {
 
   /** Register a widget custom element */
   static register(tagName: string) {
-    customElements.define(tagName, this)
+    // NOTE: exclude multiple definition of a custom element
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, this)
+    }
   }
 
   /** Widget params (attributes map) */