fix: add header slot

trovster · Oct 4, 2023 · 77323a4 · 77323a4
1 parent bd5d80a
commit 77323a4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -126,9 +126,9 @@ <h3>Distance in Kilometers, Custom Background</h3>
 
             <h3>No Date, No Footer, Custom Style &#38; Font</h3>
             <p>
-                This shows the card visualisation with no date or footer values.
-                The font has been changed and the move, exercise and stand colours
-                have been customised.
+                This shows the card visualisation with a custom header slot instead
+                of a date and no footer values. The font has been changed and the
+                move, exercise and stand colours have been customised.
             </p>
 
             <fitness-card
@@ -139,7 +139,9 @@ <h3>No Date, No Footer, Custom Style &#38; Font</h3>
                 exercise-goal="10"
                 stand-total="4"
                 stand-goal="8"
-            ></fitness-card>
+            >
+                <div slot="header">Fitness for 22nd August 2023</div>
+            </fitness-card>
         </div>
 
         <div class="rings">

diff --git a/src/FitnessCard.js b/src/FitnessCard.js
@@ -271,7 +271,7 @@ export default class FitnessCard extends HTMLElement {
       ${this.date(this.getAttribute('date'))}
     </div>
   `
-      : '';
+      : '<slot part="header" name="header"></slot>';
 
   stats = () => `
     <dl part="stats">