refactor(html): context-based media discovery, remove slot="media" by mihar-22 · Pull Request #997 · videojs/v10

mihar-22 · 2026-03-18T05:51:12Z

Closes #923

Summary

Skins use default <slot> instead of <slot name="media"> — users no longer need slot="media" on their media elements
Media discovery now relies on context (primary) and provider's querySelector fallback (for plain <video>/<audio>)
Decision doc added at internal/decisions/context-media-discovery.md
CustomMediaElement's internal <slot name="media"> (for native element override) is unchanged

vercel · 2026-03-18T05:51:18Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Mar 18, 2026 7:04am

netlify · 2026-03-18T05:51:18Z

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	`5bb6f4f`
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69ba4e60fa224c000888aa37
😎 Deploy Preview	https://deploy-preview-997--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions · 2026-03-18T05:52:41Z

📦 Bundle Size Report

🎨 @videojs/html

Path	Base	PR	Diff	%
`/media/background-video`	617 B	1.02 kB	+427 B	+69.2%	🔴
`/media/dash-video`	235.71 kB	236.15 kB	+454 B	+0.2%	🔺
`/media/hls-video`	131.17 kB	131.77 kB	+609 B	+0.5%	🔺
`/media/simple-hls-video`	11.94 kB	12.33 kB	+390 B	+3.2%	🔺

Presets (7)

Entry	Size
`/video (default)`	22.97 kB
`/video (default + hls)`	153.56 kB
`/video (minimal)`	22.86 kB
`/video (minimal + hls)`	153.30 kB
`/audio (default)`	21.26 kB
`/audio (minimal)`	21.22 kB
`/background`	6.35 kB

Media (5)

Entry	Size
`/media/background-video`	1.02 kB
`/media/container`	1.58 kB
`/media/dash-video`	236.15 kB
`/media/hls-video`	131.77 kB
`/media/simple-hls-video`	12.33 kB

Players (3)

Entry	Size
`/video/player`	6.22 kB
`/audio/player`	6.21 kB
`/background/player`	6.21 kB

Skins (16)

Entry	Type	Size
`/video/minimal-skin.css`	css	3.09 kB
`/video/skin.css`	css	3.11 kB
`/video/minimal-skin`	js	22.11 kB
`/video/minimal-skin.tailwind`	js	22.31 kB
`/video/skin`	js	22.20 kB
`/video/skin.tailwind`	js	22.57 kB
`/audio/minimal-skin.css`	css	2.25 kB
`/audio/skin.css`	css	2.29 kB
`/audio/minimal-skin`	js	20.48 kB
`/audio/minimal-skin.tailwind`	js	20.49 kB
`/audio/skin`	js	20.51 kB
`/audio/skin.tailwind`	js	20.74 kB
`/background/skin.css`	css	117 B
`/background/skin`	js	988 B
`/base.css`	css	144 B
`/shared.css`	css	43 B

UI Components (21)

Entry	Size
`/ui/alert-dialog`	2.07 kB
`/ui/alert-dialog-close`	1.22 kB
`/ui/alert-dialog-description`	1.51 kB
`/ui/alert-dialog-title`	1.55 kB
`/ui/buffering-indicator`	1.77 kB
`/ui/captions-button`	1.73 kB
`/ui/controls`	1.82 kB
`/ui/fullscreen-button`	1.82 kB
`/ui/mute-button`	1.76 kB
`/ui/pip-button`	1.75 kB
`/ui/play-button`	1.75 kB
`/ui/playback-rate-button`	1.79 kB
`/ui/popover`	3.23 kB
`/ui/poster`	1.68 kB
`/ui/seek-button`	1.76 kB
`/ui/slider`	1.98 kB
`/ui/thumbnail`	2.09 kB
`/ui/time`	1.60 kB
`/ui/time-slider`	2.07 kB
`/ui/tooltip`	2.41 kB
`/ui/volume-slider`	2.17 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react

(no changes)

Presets (7)

Entry	Size
`/video (default)`	18.86 kB
`/video (default + hls)`	149.75 kB
`/video (minimal)`	18.86 kB
`/video (minimal + hls)`	149.64 kB
`/audio (default)`	14.93 kB
`/audio (minimal)`	15.00 kB
`/background`	3.14 kB

Media (4)

Entry	Size
`/media/background-video`	476 B
`/media/dash-video`	236.19 kB
`/media/hls-video`	131.59 kB
`/media/simple-hls-video`	12.34 kB

Skins (14)

Entry	Type	Size
`/video/minimal-skin.css`	css	3.09 kB
`/video/skin.css`	css	3.11 kB
`/video/minimal-skin`	js	18.79 kB
`/video/minimal-skin.tailwind`	js	21.94 kB
`/video/skin`	js	18.79 kB
`/video/skin.tailwind`	js	21.97 kB
`/audio/minimal-skin.css`	css	2.25 kB
`/audio/skin.css`	css	2.29 kB
`/audio/minimal-skin`	js	14.93 kB
`/audio/minimal-skin.tailwind`	js	16.99 kB
`/audio/skin`	js	14.89 kB
`/audio/skin.tailwind`	js	17.21 kB
`/background/skin.css`	css	90 B
`/background/skin`	js	272 B

UI Components (18)

Entry	Size
`/ui/alert-dialog`	2.65 kB
`/ui/buffering-indicator`	2.27 kB
`/ui/captions-button`	2.32 kB
`/ui/controls`	2.20 kB
`/ui/fullscreen-button`	2.30 kB
`/ui/mute-button`	2.29 kB
`/ui/pip-button`	2.29 kB
`/ui/play-button`	2.30 kB
`/ui/playback-rate-button`	2.29 kB
`/ui/popover`	3.37 kB
`/ui/poster`	2.12 kB
`/ui/seek-button`	2.28 kB
`/ui/slider`	3.09 kB
`/ui/thumbnail`	2.49 kB
`/ui/time`	2.33 kB
`/ui/time-slider`	2.79 kB
`/ui/tooltip`	3.22 kB
`/ui/volume-slider`	2.66 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core

(no changes)

Entries (6)

Entry	Size
`.`	4.78 kB
`/dom`	8.43 kB
`/dom/media/custom-media-element`	1.81 kB
`/dom/media/dash`	235.62 kB
`/dom/media/hls`	131.27 kB
`/dom/media/simple-hls`	11.85 kB

🏷️ @videojs/element

(no changes)

Entries (2)

Entry	Size
`.`	999 B
`/context`	943 B

📦 @videojs/store

(no changes)

Entries (3)

Entry	Size
`.`	1.32 kB
`/html`	700 B
`/react`	360 B

🔧 @videojs/utils

(no changes)

Entries (10)

Entry	Size
`/array`	104 B
`/dom`	1.25 kB
`/events`	227 B
`/function`	261 B
`/object`	119 B
`/predicate`	265 B
`/string`	148 B
`/style`	190 B
`/time`	478 B
`/number`	158 B

📦 @videojs/spf

(no changes)

Entries (3)

Entry	Size
`.`	40 B
`/dom`	10.04 kB
`/playback-engine`	9.94 kB

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.

Skins now use default `<slot>` instead of `<slot name="media">`. Users no longer need `slot="media"` on their media elements — the provider discovers media via context (primary) or querySelector fallback (for plain <video>/<audio>). The internal `<slot name="media">` inside CustomMediaElement (for native element override) is unchanged. Refs #923 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Custom media elements (HlsVideo, SimpleHlsVideo, DashVideo) now self-register with the provider via mediaAttachContext using a new MediaAttachMixin. BackgroundVideo registers its inner <video> directly. Uses the raw context-request protocol so no ReactiveControllerHost is required. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Replace local CustomElementLike with CustomElement from @videojs/utils/dom - Add getMediaTarget() hook so subclasses control what registers as media - BackgroundVideo now extends MediaAttachMixin(HTMLElement) and overrides getMediaTarget() to return this.target - Remove unnecessary casts and pointless comments Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The selector targeted [slot="media"] which no longer exists after removing the slot="media" attribute requirement. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

This PR refactors HTML media discovery to be context-based (with a provider querySelector fallback for plain <video>/<audio>), and updates skins/templates to use a default <slot> so users no longer need slot="media" on media elements.

Changes:

Replace named media slots in skins/templates with the default slot.
Introduce MediaAttachMixin so custom media elements register themselves via mediaAttachContext.
Add a decision record documenting the approach.

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/sandbox/templates/html-video/main.ts	Removes `slot="media"` from the native `<video>` example.
packages/sandbox/templates/html-simple-hls-video/main.ts	Removes `slot="media"` from `<simple-hls-video>` example.
packages/sandbox/templates/html-hls-video/main.ts	Removes `slot="media"` from `<hls-video>` example.
packages/sandbox/templates/html-dash-video/main.ts	Removes `slot="media"` from `<dash-video>` example.
packages/sandbox/templates/html-background-video/main.ts	Removes `slot="media"` from `<background-video>` example.
packages/sandbox/templates/html-audio/main.ts	Removes `slot="media"` from the native `<audio>` example.
packages/html/src/store/media-attach-mixin.ts	Adds a mixin intended to request attach context and register media with the provider.
packages/html/src/media/simple-hls-video/index.ts	Applies `MediaAttachMixin` to `SimpleHlsVideo`.
packages/html/src/media/hls-video/index.ts	Applies `MediaAttachMixin` to `HlsVideo`.
packages/html/src/media/dash-video/index.ts	Applies `MediaAttachMixin` to `DashVideo`.
packages/html/src/media/background-video/index.ts	Applies `MediaAttachMixin` to `BackgroundVideo` and registers the inner `<video>` target.
packages/html/src/index.ts	Exports `media-attach-mixin` from the public entrypoint.
packages/html/src/define/video/skin.ts	Switches video skin from `<slot name="media">` to default `<slot>`.
packages/html/src/define/video/skin.tailwind.ts	Switches Tailwind video skin from named to default slot.
packages/html/src/define/video/minimal-skin.ts	Switches minimal video skin from named to default slot.
packages/html/src/define/video/minimal-skin.tailwind.ts	Switches Tailwind minimal video skin from named to default slot.
packages/html/src/define/background/skin.ts	Switches background skin from named to default slot.
packages/html/src/define/background/skin.css	Updates selector from `[slot="media"]` to targeting `background-video`.
packages/html/src/define/audio/skin.ts	Switches audio skin from `<slot name="media">` to default `<slot>`.
packages/html/src/define/audio/skin.tailwind.ts	Switches Tailwind audio skin from named to default slot.
packages/html/src/define/audio/minimal-skin.ts	Switches minimal audio skin from named to default slot.
packages/html/src/define/audio/minimal-skin.tailwind.ts	Switches Tailwind minimal audio skin from named to default slot.
packages/element/src/context.ts	Adjusts `@videojs/element/context` re-exports to include an event class.
internal/decisions/context-media-discovery.md	Adds decision doc explaining context-based discovery and fallback behavior.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

luwes

LGTM!

For skins which do still use real shadow dom manual slot assignment came to mind.
Could that still be useful? Just throwing it out there.
https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/slotAssignment

Remove slot="media" from all docs, demos, and site components after #975 and #997 made it unnecessary. Update prose that described the old MutationObserver/slot-based attachment pattern. Add reference pages for MediaAttachMixin and useContainerAttach. - Remove slot="media" from 22 demo HTML files - Remove slot="media" from homepage and installation code generators - Remove slot="media" from all MDX concept and reference pages - Fix overview.mdx line 119: drop incorrect slot="media" guidance - Rewrite player-container.mdx: media attachment section now correct - Rewrite container-mixin.mdx: drop MutationObserver description, describe actual behavior (registers self via containerAttachContext) - Rewrite provider-mixin.mdx: document store.attach() ownership, mediaAttachContext/containerAttachContext, querySelector fallback - Add reference/media-attach-mixin.mdx (new) - Add reference/use-container-attach.mdx (new) - Add both new pages to docs.config.ts sidebar Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

@deprecated

PR #997 removed slot="media" from all skin templates. This restores the named slot alongside the new default slot so users who haven't migrated yet don't break. The slot is marked @deprecated with a comment. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel bot deployed to Preview March 18, 2026 06:21 View deployment

vercel bot deployed to Preview March 18, 2026 06:43 View deployment

vercel bot deployed to Preview March 18, 2026 06:58 View deployment

mihar-22 and others added 4 commits March 18, 2026 00:03

fix(html): update background video skin CSS selector after slot removal

5bb6f4f

The selector targeted [slot="media"] which no longer exists after removing the slot="media" attribute requirement. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

mihar-22 force-pushed the refactor/context-media-discovery branch from 9803dd3 to 5bb6f4f Compare March 18, 2026 07:03

vercel bot deployed to Preview March 18, 2026 07:04 View deployment

mihar-22 marked this pull request as ready for review March 18, 2026 07:08

mihar-22 requested review from Copilot and sampotts March 18, 2026 07:08

Copilot started reviewing on behalf of mihar-22 March 18, 2026 07:08 View session

Copilot AI reviewed Mar 18, 2026

View reviewed changes

Comment thread packages/element/src/context.ts

Comment thread packages/html/src/store/media-attach-mixin.ts

Comment thread packages/html/src/store/media-attach-mixin.ts

sampotts approved these changes Mar 18, 2026

View reviewed changes

mihar-22 requested a review from luwes March 18, 2026 19:35

luwes approved these changes Mar 18, 2026

View reviewed changes

mihar-22 merged commit e09ea33 into main Mar 19, 2026
24 checks passed

mihar-22 deleted the refactor/context-media-discovery branch March 19, 2026 05:21

github-actions bot mentioned this pull request Mar 19, 2026

fix: improve error message when no slotted media element is found #724

Closed

mihar-22 mentioned this pull request Mar 19, 2026

docs: update site for context-based media discovery and provider attach refactor #1017

Closed

37 tasks

mihar-22 mentioned this pull request Mar 19, 2026

docs: update site for context-based media discovery #1018

Merged

This was referenced Mar 19, 2026

fix(html): restore deprecated slot="media" for backwards compatibility #1020

Merged

- #1026

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(html): context-based media discovery, remove slot="media"#997

refactor(html): context-based media discovery, remove slot="media"#997
mihar-22 merged 4 commits intomainfrom
refactor/context-media-discovery

mihar-22 commented Mar 18, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

netlify bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

luwes left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

mihar-22 commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

vercel bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vjs10-site ready!

Uh oh!

github-actions bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Bundle Size Report

🎨 @videojs/html

⚛️ @videojs/react

🧩 @videojs/core

🏷️ @videojs/element

📦 @videojs/store

🔧 @videojs/utils

📦 @videojs/spf

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

luwes left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mihar-22 commented Mar 18, 2026 •

edited

Loading

vercel bot commented Mar 18, 2026 •

edited

Loading

netlify bot commented Mar 18, 2026 •

edited

Loading

github-actions bot commented Mar 18, 2026 •

edited

Loading