fix: add error-x-title and error-x-message slots

luwes · Dec 5, 2024 · 7bebf49 · 7bebf49
1 parent 2cca05e
commit 7bebf49
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/examples/vanilla/control-elements/media-error-dialog.html b/examples/vanilla/control-elements/media-error-dialog.html
@@ -94,11 +94,22 @@ <h2>Error 4 (MEDIA_ERR_SRC_NOT_SUPPORTED)</h2>
       <h2>Error 5 (MEDIA_ERR_ENCRYPTED)</h2>
       <media-error-dialog mediaerrorcode="5"></media-error-dialog>
 
-      <h2>Error 2 with custom message via <code>error-2</code> slot</h2>
+      <h2>Error 2 with custom error content via <code>error-2</code> slot</h2>
       <media-error-dialog mediaerrorcode="2">
         <h3 slot="error-2">Custom Error 2</h3>
         <p slot="error-2">This is a custom message</p>
       </media-error-dialog>
+
+      <h2>Error 2 with custom error title via <code>error-2-title</code> slot</h2>
+      <media-error-dialog mediaerrorcode="2">
+        <h3 slot="error-2-title">Custom Error 2 Title</h3>
+      </media-error-dialog>
+
+      <h2>Error 2 with custom error message via <code>error-2-message</code> slot</h2>
+      <media-error-dialog mediaerrorcode="2">
+        <p slot="error-2-message">This is a custom message</p>
+      </media-error-dialog>
+
     </div>
 
     <br>

diff --git a/src/js/media-error-dialog.ts b/src/js/media-error-dialog.ts
@@ -45,8 +45,8 @@ function shouldOpenErrorDialog(error: MediaErrorLike) {
 function formatErrorMessage(error: MediaErrorLike) {
   const { title, message } = formatError(error) ?? {};
   let html = '';
-  if (title) html += `<h3>${title}</h3>`;
-  if (message) html += `<p>${message}</p>`;
+  if (title) html += `<slot name="error-${error.code}-title"><h3>${title}</h3></slot>`;
+  if (message) html += `<slot name="error-${error.code}-message"><p>${message}</p></slot>`;
   return html;
 }