fix: use dialog slot naming

luwes · Dec 3, 2024 · 3b209a6 · 3b209a6
1 parent eb29376
commit 3b209a6
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git 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
@@ -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);