From 46a6bc16ab287d602cbe3715e0ae0f0c1e20e3ff Mon Sep 17 00:00:00 2001
From: Ross Cooper <37559715+Froskk@users.noreply.github.com>
Date: Tue, 22 Oct 2024 10:45:58 +0100
Subject: [PATCH 1/2] fix: check for existing custom element

#38
---
 packages/number-flow/src/index.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/number-flow/src/index.ts b/packages/number-flow/src/index.ts
index 38da41c6..efe1e1f8 100644
--- a/packages/number-flow/src/index.ts
+++ b/packages/number-flow/src/index.ts
@@ -49,7 +49,22 @@ let styleSheet: CSSStyleSheet | undefined
 // doesn't include things like attribute support:
 export class NumberFlowLite extends ServerSafeHTMLElement {
 	static define() {
-		if (BROWSER) customElements.define('number-flow', this)
+		if (BROWSER) {
+			const registeredElement = customElements.get('number-flow')
+
+			// If an element is already registered with the same name by another library, warn the user.
+			if (registeredElement && registeredElement.constructor !== this.constructor) {
+				console.error(
+					'An element has already been defined under the name `number-flow`. NumberFlow is not compatible in this case.'
+				)
+				return
+			}
+
+			// If the element is not registered, register it.
+			if (!registeredElement) {
+				customElements.define('number-flow', this)
+			}
+		}
 	}
 
 	transformTiming = defaultTransformTiming

From 63ef7a0e40a861090cc5ed2a7d43b1a1ebca4eaf Mon Sep 17 00:00:00 2001
From: Ross Cooper <37559715+Froskk@users.noreply.github.com>
Date: Tue, 22 Oct 2024 10:48:29 +0100
Subject: [PATCH 2/2] fix: only attach shadowRoot if it doesn't exist

---
 packages/number-flow/src/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/number-flow/src/index.ts b/packages/number-flow/src/index.ts
index efe1e1f8..f78b5639 100644
--- a/packages/number-flow/src/index.ts
+++ b/packages/number-flow/src/index.ts
@@ -106,7 +106,9 @@ export class NumberFlowLite extends ServerSafeHTMLElement {
 			this.#parts = parts
 
 			// Don't check for declarative shadow DOM because we'll recreate it anyway:
-			this.attachShadow({ mode: 'open' })
+			if (!this.shadowRoot) {
+				this.attachShadow({ mode: 'open' })
+			}
 
 			// Add stylesheet
 			if (typeof CSSStyleSheet !== 'undefined' && this.shadowRoot!.adoptedStyleSheets) {