diff --git a/src/lib/auth/context.ts b/src/lib/auth/context.ts
index 977570f75..059780b99 100644
--- a/src/lib/auth/context.ts
+++ b/src/lib/auth/context.ts
@@ -13,4 +13,4 @@ export interface AuthContext {
 }
 
 export const DEFAULT_AUTH_CONTEXT = new NoopAuth()
-export const authContext = createContext<AuthContext>(Symbol('auth'))
+export const authContext = createContext<AuthContext>(Symbol.for('solid-ui.auth'))
diff --git a/src/lib/components/decorators.ts b/src/lib/components/decorators.ts
index 856d21afd..3b14a2927 100644
--- a/src/lib/components/decorators.ts
+++ b/src/lib/components/decorators.ts
@@ -8,6 +8,8 @@
  * See https://github.com/SolidOS/solidos/issues/300
  */
 
+const customElementTagNames = new WeakMap<CustomElementConstructor, string>()
+
 function defineCustomElement (tagName: string, elementClass: CustomElementConstructor): void {
   if (customElements.get(tagName)) {
     return
@@ -16,8 +18,19 @@ function defineCustomElement (tagName: string, elementClass: CustomElementConstr
   customElements.define(tagName, elementClass)
 }
 
+export function getCustomElementTagName (elementClass: CustomElementConstructor): string {
+  const tagName = customElementTagNames.get(elementClass)
+  if (!tagName) {
+    throw new Error('Cannot create dialog: the component is not registered with customElement().')
+  }
+
+  return tagName
+}
+
 export function customElement (tagName: string) {
   return (elementClass: CustomElementConstructor, context?: ClassDecoratorContext) => {
+    customElementTagNames.set(elementClass, tagName)
+
     if (context) {
       context.addInitializer(() => defineCustomElement(tagName, elementClass))
 
diff --git a/src/lib/dialogs/helpers.ts b/src/lib/dialogs/helpers.ts
index 891a5d302..08d00fd67 100644
--- a/src/lib/dialogs/helpers.ts
+++ b/src/lib/dialogs/helpers.ts
@@ -1,6 +1,7 @@
 import { ShowDialogEvent } from './events/show-dialog'
 import Dialog, { DialogConfig } from './Dialog'
 import type WebComponent from '@/lib/components/web-component/WebComponent'
+import { getCustomElementTagName } from '@/lib/components/decorators'
 import type { GetWebComponentMetadata, WebComponentConstructor } from '@/lib/components/web-component/WebComponent'
 
 export type GetDialogResult<T, TFallback = unknown> = GetWebComponentMetadata<T> extends { dialogResult: infer TResult } ? TResult : TFallback
@@ -9,7 +10,7 @@ export function showDialog<T extends WebComponent> (
   DialogComponent: WebComponentConstructor<T>,
   config?: DialogConfig<GetDialogResult<T>> & { props?: Partial<T> }
 ): T {
-  const element = new DialogComponent()
+  const element = document.createElement(getCustomElementTagName(DialogComponent)) as T
 
   Object.assign(element, config?.props)
 
diff --git a/test/unit/index.test.ts b/test/unit/index.test.ts
index 33bf40ebb..78ba30143 100644
--- a/test/unit/index.test.ts
+++ b/test/unit/index.test.ts
@@ -37,6 +37,7 @@ describe('Index', () => {
       'dom',
       'fileExplorerContext',
       'generateId',
+      'getCustomElementTagName',
       'getRelevantPanes',
       'icons',
       'infiniteMessageArea',