diff --git a/examples/vanilla/control-elements/media-error-dialog.html b/examples/vanilla/control-elements/media-error-dialog.html
index ddba1e15e..84dc8df5d 100644
--- a/examples/vanilla/control-elements/media-error-dialog.html
+++ b/examples/vanilla/control-elements/media-error-dialog.html
@@ -59,7 +59,7 @@ <h2>Non existing mp4</h2>
       ></custom-video>
       <img slot="poster" src="https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13" />
       <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
-      <media-error-dialog slot="top-layer"></media-error-dialog>
+      <media-error-dialog slot="dialog"></media-error-dialog>
       <media-control-bar>
         <media-play-button></media-play-button>
         <media-mute-button></media-mute-button>
diff --git a/src/js/media-container.ts b/src/js/media-container.ts
index a9d9a2205..9593af2b2 100644
--- a/src/js/media-container.ts
+++ b/src/js/media-container.ts
@@ -193,7 +193,7 @@ template.innerHTML = /*html*/ `
       display: none;
     }
 
-    slot[name=top-layer]::slotted(*) {
+    slot[name=dialog]::slotted(*) {
       z-index: 2;
     }
 
@@ -220,7 +220,7 @@ template.innerHTML = /*html*/ `
     ${/* default, effectively "bottom-chrome" */ ''}
     <slot part="bottom chrome"></slot>
   </span>
-  <slot name="top-layer" part="layer top-layer"></slot>
+  <slot name="dialog" part="layer dialog-layer"></slot>
 `;
 
 const MEDIA_UI_ATTRIBUTE_NAMES = Object.values(MediaUIAttributes);