diff --git a/examples/nextjs/app/hls-video/page.tsx b/examples/nextjs/app/hls-video/page.tsx
index e00b6be..4fe7f10 100644
--- a/examples/nextjs/app/hls-video/page.tsx
+++ b/examples/nextjs/app/hls-video/page.tsx
@@ -19,7 +19,14 @@ export default function Page() {
           crossOrigin=""
           playsInline
           suppressHydrationWarning
-        ></Player>
+        >
+          <track
+            label="thumbnails"
+            default
+            kind="metadata"
+            src="https://image.mux.com/jtWZbHQ013SLyISc9LbIGn8f4c3lWan00qOkoPMZEXmcU/storyboard.vtt"
+          />
+        </Player>
       </section>
     </>
   );
diff --git a/packages/custom-media-element/custom-media-element.js b/packages/custom-media-element/custom-media-element.js
index d1850d8..d8c57cd 100644
--- a/packages/custom-media-element/custom-media-element.js
+++ b/packages/custom-media-element/custom-media-element.js
@@ -220,6 +220,7 @@ export const CustomMediaMixin = (superclass, { tag, is }) => {
     }
 
     get nativeEl() {
+      this.#init();
       return this.#nativeEl
         ?? this.shadowRoot.querySelector(tag)
         ?? this.querySelector(':scope > [slot=media]')
@@ -280,6 +281,7 @@ export const CustomMediaMixin = (superclass, { tag, is }) => {
       }
 
       this.shadowRoot.addEventListener('slotchange', this);
+      this.#syncMediaChildren();
 
       for (let type of this.constructor.Events) {
         this.shadowRoot.addEventListener?.(type, this, true);
@@ -309,7 +311,7 @@ export const CustomMediaMixin = (superclass, { tag, is }) => {
       const removeNativeChildren = new Map(this.#childMap);
 
       this.shadowRoot.querySelector('slot:not([name])')
-        .assignedElements()
+        .assignedElements({ flatten: true })
         .filter((el) => ['track', 'source'].includes(el.localName))
         .forEach((el) => {
           // If the source or track is still in the assigned elements keep it.