diff --git a/packages/number-flow/src/index.ts b/packages/number-flow/src/index.ts
index 38da41c6..f78b5639 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
@@ -91,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) {