Skip to content

docs(site): explain custom element lifecycle - #2424

Merged
decepulis merged 2 commits into
codex/docs-audit-22-player-contextsfrom
codex/docs-audit-23-custom-element-lifecycle
Aug 26, 2026
Merged

docs(site): explain custom element lifecycle#2424
decepulis merged 2 commits into
codex/docs-audit-22-player-contextsfrom
codex/docs-audit-23-custom-element-lifecycle

Conversation

@decepulis

@decepulis decepulis commented Aug 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Summary

  • Add an HTML-focused custom element lifecycle concept page.
  • Explain disconnect cleanup, delayed permanent destruction, reparenting, keep-alive behavior, and provider detach versus store destruction.

Verification

  • CI=true pnpm -F site test src/tests/sidebar.test.ts
  • CI=true pnpm -F @videojs/element test
  • CI=true pnpm -F @videojs/media test

Closes #1034

Stack created with GitHub Stacks CLI • Give Feedback 💬

@vercel

vercel Bot commented Aug 25, 2026 •
edited
Loading

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
v10-sandbox Ready Ready Preview Aug 26, 2026 2:13pm

Request Review

@pkg-pr-new

pkg-pr-new Bot commented Aug 25, 2026 •
edited
Loading

Copy link
Copy Markdown
@videojs/core

pnpm add https://pkg.pr.new/@videojs/core@2424

@videojs/element

pnpm add https://pkg.pr.new/@videojs/element@2424

@videojs/html

pnpm add https://pkg.pr.new/@videojs/html@2424

@videojs/media

pnpm add https://pkg.pr.new/@videojs/media@2424

@videojs/react

pnpm add https://pkg.pr.new/@videojs/react@2424

@videojs/spf

pnpm add https://pkg.pr.new/@videojs/spf@2424

@videojs/store

pnpm add https://pkg.pr.new/@videojs/store@2424

@videojs/utils

pnpm add https://pkg.pr.new/@videojs/utils@2424

commit: 7e80e90

@github-actions

github-actions Bot commented Aug 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Initial Lazy
/video (default) 61.00 kB 56.87 kB
/video (default + hls) 199.88 kB 56.87 kB
/video (minimal) 60.81 kB 56.87 kB
/video (minimal + hls) 199.88 kB 56.87 kB
/audio (default) 50.75 kB 56.87 kB
/audio (minimal) 46.83 kB 56.87 kB
/background 11.47 kB 56.87 kB
Media (19)
Entry Initial
/media/mux-video 142.33 kB
/media/mux-audio 142.05 kB
/media/background-video 1.16 kB
/media/cloudflare-video 6.25 kB
/media/dash-video 211.72 kB
/media/google-cast 6.52 kB
/media/hls-audio 22.07 kB
/media/hls-background-video 16.80 kB
/media/hls-video 27.96 kB
/media/hlsjs-video 141.03 kB
/media/mux-background-video 16.84 kB
/media/mux-data 26.73 kB
/media/native-hls-video 7.51 kB
/media/shaka-video 199.21 kB
/media/spotify-audio 6.24 kB
/media/tiktok-video 6.29 kB
/media/twitch-video 6.19 kB
/media/vimeo-video 13.03 kB
/media/youtube-video 6.79 kB
Players (5)
Entry Initial Lazy
/video/player 9.65 kB 56.87 kB
/audio/player 6.09 kB 56.87 kB
/background/player 4.45 kB 56.87 kB
/live-video/player 9.03 kB 56.87 kB
/live-audio/player 6.12 kB 56.87 kB
Skins (37)
Entry Type Initial Lazy
/video/minimal-skin.css css 6.53 kB —
/video/skin.css css 6.31 kB —
/video/minimal-skin js 59.27 kB 56.87 kB
/video/minimal-skin.tailwind js 59.56 kB 56.87 kB
/video/minimal-skin2 js 7.04 kB —
/video/skin js 59.40 kB 56.87 kB
/video/skin.tailwind js 59.75 kB 56.87 kB
/video/skin2 js 6.88 kB —
/audio/minimal-skin.css css 4.79 kB —
/audio/skin.css css 4.72 kB —
/audio/minimal-skin js 45.34 kB 56.87 kB
/audio/minimal-skin.tailwind js 45.87 kB 56.87 kB
/audio/minimal-skin2 js 5.15 kB —
/audio/skin js 49.30 kB 56.87 kB
/audio/skin.tailwind js 49.73 kB 56.87 kB
/audio/skin2 js 5.13 kB —
/background/skin.css css 145 B —
/background/skin js 9.72 kB 56.87 kB
/background/skin2 js 190 B —
/live-video/minimal-skin.css css 6.53 kB —
/live-video/skin.css css 6.31 kB —
/live-video/minimal-skin js 53.35 kB 56.87 kB
/live-video/minimal-skin.tailwind js 53.37 kB 56.87 kB
/live-video/minimal-skin2 js 7.04 kB —
/live-video/skin js 55.96 kB 56.87 kB
/live-video/skin.tailwind js 56.05 kB 56.87 kB
/live-video/skin2 js 6.88 kB —
/live-audio/minimal-skin.css css 4.79 kB —
/live-audio/skin.css css 4.72 kB —
/live-audio/minimal-skin js 38.77 kB 56.87 kB
/live-audio/minimal-skin.tailwind js 38.01 kB 56.87 kB
/live-audio/minimal-skin2 js 5.15 kB —
/live-audio/skin js 42.33 kB 56.87 kB
/live-audio/skin.tailwind js 41.71 kB 56.87 kB
/live-audio/skin2 js 5.13 kB —
/global.css css 190 B —
/shared.css css 118 B —
UI Components (49)
Entry Initial Lazy
/ui/airplay-button 11.15 kB 56.87 kB
/ui/alert-dialog 9.12 kB 56.87 kB
/ui/audio-track-radio-group 11.29 kB 56.87 kB
/ui/buffering-indicator 8.56 kB 56.87 kB
/ui/captions-button 11.40 kB 56.87 kB
/ui/captions-radio-group 11.36 kB 56.87 kB
/ui/cast-button 11.11 kB 56.87 kB
/ui/container 9.41 kB 56.87 kB
/ui/controls 8.77 kB 56.87 kB
/ui/controls-backdrop 1.69 kB 56.87 kB
/ui/controls-content 1.67 kB 56.87 kB
/ui/dialog 9.05 kB 56.87 kB
/ui/dialog-backdrop 1.70 kB 56.87 kB
/ui/dialog-close 2.01 kB 56.87 kB
/ui/dialog-description 1.69 kB 56.87 kB
/ui/dialog-popup 1.87 kB 56.87 kB
/ui/dialog-title 1.70 kB 56.87 kB
/ui/error-dialog 12.63 kB 56.87 kB
/ui/fullscreen-button 11.10 kB 56.87 kB
/ui/gesture 9.37 kB 56.87 kB
/ui/hotkey 9.80 kB 56.87 kB
/ui/menu 19.89 kB 56.87 kB
/ui/mute-button 11.14 kB 56.87 kB
/ui/pip-button 11.08 kB 56.87 kB
/ui/play-button 11.09 kB 56.87 kB
/ui/playback-rate-button 11.20 kB 56.87 kB
/ui/playback-rate-radio-group 11.27 kB 56.87 kB
/ui/popover 8.51 kB 56.87 kB
/ui/poster 8.63 kB 56.87 kB
/ui/quality-radio-group 11.86 kB 56.87 kB
/ui/seek-button 11.14 kB 56.87 kB
/ui/seek-indicator 12.47 kB 56.87 kB
/ui/seek-indicator-value 1.10 kB —
/ui/slider 11.95 kB 56.87 kB
/ui/status-announcer 10.56 kB 56.87 kB
/ui/status-indicator 12.82 kB 56.87 kB
/ui/status-indicator-value 1.10 kB —
/ui/thumbnail 9.73 kB 56.87 kB
/ui/time 10.81 kB 56.87 kB
/ui/time-slider 14.88 kB 56.87 kB
/ui/time-slider-chapter-title 8.74 kB 56.87 kB
/ui/time-slider-chapters 9.69 kB 56.87 kB
/ui/title 8.13 kB 56.87 kB
/ui/tooltip 9.90 kB 56.87 kB
/ui/volume-indicator 12.85 kB 56.87 kB
/ui/volume-indicator-fill 1.11 kB —
/ui/volume-indicator-value 1.10 kB —
/ui/volume-popover 14.64 kB 56.87 kB
/ui/volume-slider 12.60 kB 56.87 kB
⚛️ @videojs/react — no changes
Presets (7)
Entry Initial Lazy
/video (default) 47.50 kB 56.87 kB
/video (default + hls) 185.31 kB 56.87 kB
/video (minimal) 47.63 kB 56.87 kB
/video (minimal + hls) 185.54 kB 56.87 kB
/audio (default) 36.93 kB 56.87 kB
/audio (minimal) 37.08 kB 56.87 kB
/background 581 B 56.87 kB
Media (23)
Entry Initial
/media/mux-video/hls-js 140.62 kB
/media/mux-video/spf 27.31 kB
/media/mux-audio/hls-js 140.46 kB
/media/mux-audio/spf 21.28 kB
/media/background-video 402 B
/media/cloudflare-video 4.35 kB
/media/dash-video 210.29 kB
/media/google-cast 5.34 kB
/media/hls-audio 20.32 kB
/media/hls-background-video 16.42 kB
/media/hls-video 26.29 kB
/media/hlsjs-video 139.58 kB
/media/mux-audio 140.44 kB
/media/mux-background-video 16.42 kB
/media/mux-data 25.45 kB
/media/mux-video 140.54 kB
/media/native-hls-video 5.76 kB
/media/shaka-video 197.52 kB
/media/spotify-audio 4.22 kB
/media/tiktok-video 4.18 kB
/media/twitch-video 4.30 kB
/media/vimeo-video 11.21 kB
/media/youtube-video 4.86 kB
Players (5)
Entry Initial Lazy
/video/player 7.51 kB 56.87 kB
/audio/player 3.95 kB 56.87 kB
/background/player 2.27 kB 56.87 kB
/live-video/player 6.91 kB 56.87 kB
/live-audio/player 3.95 kB 56.87 kB
Skins (26)
Entry Type Initial Lazy
/video/minimal-skin.css css 6.42 kB —
/video/skin.css css 6.21 kB —
/video/minimal-skin js 47.54 kB 56.87 kB
/video/minimal-skin.tailwind js 54.54 kB 56.87 kB
/video/skin js 47.40 kB 56.87 kB
/video/skin.tailwind js 54.15 kB 56.87 kB
/audio/minimal-skin.css css 4.64 kB —
/audio/skin.css css 4.57 kB —
/audio/minimal-skin js 36.92 kB 56.87 kB
/audio/minimal-skin.tailwind js 42.12 kB 56.87 kB
/audio/skin js 36.85 kB 56.87 kB
/audio/skin.tailwind js 42.08 kB 56.87 kB
/background/skin.css css 90 B —
/background/skin js 277 B —
/live-video/minimal-skin.css css 6.42 kB —
/live-video/skin.css css 6.21 kB —
/live-video/minimal-skin js 39.58 kB 56.87 kB
/live-video/minimal-skin.tailwind js 46.26 kB 56.87 kB
/live-video/skin js 39.61 kB 56.87 kB
/live-video/skin.tailwind js 46.19 kB 56.87 kB
/live-audio/minimal-skin.css css 4.64 kB —
/live-audio/skin.css css 4.57 kB —
/live-audio/minimal-skin js 28.81 kB 56.87 kB
/live-audio/minimal-skin.tailwind js 32.81 kB 56.87 kB
/live-audio/skin js 28.80 kB 56.87 kB
/live-audio/skin.tailwind js 32.91 kB 56.87 kB
UI Components (39)
Entry Initial Lazy
/ui/airplay-button 10.28 kB 56.87 kB
/ui/alert-dialog 4.41 kB 56.87 kB
/ui/audio-track 7.89 kB 56.87 kB
/ui/audio-track-radio-group 9.05 kB 56.87 kB
/ui/buffering-indicator 7.72 kB 56.87 kB
/ui/captions-button 10.25 kB 56.87 kB
/ui/captions-radio-group 9.17 kB 56.87 kB
/ui/cast-button 10.26 kB 56.87 kB
/ui/controls 7.51 kB 56.87 kB
/ui/dialog 4.44 kB 56.87 kB
/ui/error-dialog 11.44 kB 56.87 kB
/ui/fullscreen-button 10.24 kB 56.87 kB
/ui/gesture 7.80 kB 56.87 kB
/ui/hotkey 8.21 kB 56.87 kB
/ui/live-button 8.69 kB 56.87 kB
/ui/menu 18.75 kB 56.87 kB
/ui/mute-button 10.26 kB 56.87 kB
/ui/pip-button 10.23 kB 56.87 kB
/ui/play-button 10.21 kB 56.87 kB
/ui/playback-rate 7.94 kB 56.87 kB
/ui/playback-rate-button 10.22 kB 56.87 kB
/ui/playback-rate-radio-group 9.09 kB 56.87 kB
/ui/popover 8.09 kB 56.87 kB
/ui/poster 7.49 kB 56.87 kB
/ui/quality 8.38 kB 56.87 kB
/ui/quality-radio-group 9.54 kB 56.87 kB
/ui/seek-button 10.25 kB 56.87 kB
/ui/seek-indicator 11.75 kB 56.87 kB
/ui/slider 12.55 kB 56.87 kB
/ui/status-announcer 10.01 kB 56.87 kB
/ui/status-indicator 12.07 kB 56.87 kB
/ui/thumbnail 8.64 kB 56.87 kB
/ui/time 9.69 kB 56.87 kB
/ui/time-slider 14.01 kB 56.87 kB
/ui/title 7.19 kB 56.87 kB
/ui/tooltip 8.87 kB 56.87 kB
/ui/volume-indicator 12.15 kB 56.87 kB
/ui/volume-popover 14.09 kB 56.87 kB
/ui/volume-slider 11.97 kB 56.87 kB
🧩 @videojs/core — no changes
Entries (76)
Entry Initial Lazy
. 13.02 kB —
/dom 21.76 kB 56.87 kB
/vjsc 1.74 kB —
/i18n 3.23 kB 56.87 kB
/i18n/locales/all 34.97 kB —
/i18n/locales/ar 1.22 kB —
/i18n/locales/az 1.09 kB —
/i18n/locales/bg 1.29 kB —
/i18n/locales/bn 1.23 kB —
/i18n/locales/bs 1.00 kB —
/i18n/locales/ca 1.07 kB —
/i18n/locales/cs 1.07 kB —
/i18n/locales/cy 1.02 kB —
/i18n/locales/da 1006 B —
/i18n/locales/de 1.09 kB —
/i18n/locales/el 1.49 kB —
/i18n/locales/en 785 B —
/i18n/locales/es 1018 B —
/i18n/locales/et 1.05 kB —
/i18n/locales/eu 1.03 kB —
/i18n/locales/fa 1.22 kB —
/i18n/locales/fi 1.04 kB —
/i18n/locales/fr 1.07 kB —
/i18n/locales/gd 1.10 kB —
/i18n/locales/gl 1022 B —
/i18n/locales/he 1.14 kB —
/i18n/locales/hi 1.30 kB —
/i18n/locales/hr 1.02 kB —
/i18n/locales/hu 1.10 kB —
/i18n/locales/id 919 B —
/i18n/locales/it 1.01 kB —
/i18n/locales/ja 1.18 kB —
/i18n/locales/ko 1.14 kB —
/i18n/locales/lt 1.02 kB —
/i18n/locales/lv 1.09 kB —
/i18n/locales/mr 1.30 kB —
/i18n/locales/nb 987 B —
/i18n/locales/ne 1.29 kB —
/i18n/locales/nl 1.00 kB —
/i18n/locales/nn 987 B —
/i18n/locales/oc 1.08 kB —
/i18n/locales/pl 1.14 kB —
/i18n/locales/pt 1.03 kB —
/i18n/locales/pt-BR 1.03 kB —
/i18n/locales/pt-PT 1.01 kB —
/i18n/locales/ro 1.07 kB —
/i18n/locales/ru 1.40 kB —
/i18n/locales/sk 1.10 kB —
/i18n/locales/sl 1.04 kB —
/i18n/locales/sr 1.07 kB —
/i18n/locales/sv 1.01 kB —
/i18n/locales/te 1.32 kB —
/i18n/locales/th 1.29 kB —
/i18n/locales/tr 1.08 kB —
/i18n/locales/uk 1.41 kB —
/i18n/locales/vi 1.11 kB —
/i18n/locales/zh 1.02 kB —
/i18n/locales/zh-CN 1.02 kB —
/i18n/locales/zh-TW 1.02 kB —
/i18n/text/airplay 101 B —
/i18n/text/buttons 137 B —
/i18n/text/captions 93 B —
/i18n/text/cast 114 B —
/i18n/text/common 90 B —
/i18n/text/container 75 B —
/i18n/text/errors 285 B —
/i18n/text/fullscreen 98 B —
/i18n/text/live 126 B —
/i18n/text/menu 249 B —
/i18n/text/pip 101 B —
/i18n/text/playback 80 B —
/i18n/text/seek 105 B —
/i18n/text/slider 65 B —
/i18n/text/status 222 B —
/i18n/text/time 280 B —
/i18n/text/volume 133 B —
🏷️ @videojs/element — no changes
Entries (2)
Entry Initial
. 1.05 kB
/context 943 B
📦 @videojs/store — no changes
Entries (3)
Entry Initial
. 1.72 kB
/html 703 B
/react 365 B
🔧 @videojs/utils — no changes
Entries (13)
Entry Initial
/array 271 B
/dom 5.02 kB
/events 320 B
/function 386 B
/i18n 249 B
/jwt 176 B
/object 535 B
/predicate 297 B
/percent 281 B
/string 239 B
/style 212 B
/time 976 B
/number 199 B

📦 @videojs/media

Path Base initial PR initial Initial diff Lazy diff
/dom/dash 209.83 kB 3.28 kB -206.54 kB (-98.4%) —
Entries (21)
Entry Initial
. 1.07 kB
/dom 121 B
/dom/dash 3.28 kB
/dom/audio-host 1.10 kB
/dom/cloudflare 3.69 kB
/dom/custom-media-element 2.09 kB
/dom/dash 209.83 kB
/dom/google-cast 4.06 kB
/dom/hls-js 139.17 kB
/dom/media-host 1.20 kB
/dom/media-played-ranges 576 B
/dom/mux 162.62 kB
/dom/native-hls 5.25 kB
/dom/shaka 197.02 kB
/dom/spotify 3.58 kB
/dom/tiktok 3.57 kB
/dom/twitch 3.62 kB
/dom/video-host 1.39 kB
/dom/vimeo 10.62 kB
/dom/youtube 4.25 kB
/media-tracks 2.05 kB
📦 @videojs/spf — no changes
Entries (10)
Entry Initial
. 4.55 kB
/dom 6.60 kB
/hls 22.09 kB
/media-tracks 504 B
/hls-background-video 15.92 kB
/hls-audio 19.84 kB
/hls-video 25.82 kB
/mux-audio 20.75 kB
/mux-background-video 15.87 kB
/mux-video 26.63 kB
ℹ️ How to interpret

Each entry is independently bundled, minified, and brotli-compressed. Initial size includes its static import graph; lazy dynamic chunks are reported separately.

Entries are not additive because their dependency graphs overlap. Preset rows represent realistic combined bundles.

Changes of 300 B or less across initial, lazy, and total size are collapsed, not discarded.

Run pnpm size locally to check current initial sizes.

@netlify

netlify Bot commented Aug 25, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit 7e80e90
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/6a8ef47565bc2a0008cb5379
😎 Deploy Preview https://deploy-preview-2424--vjs10-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

decepulis
decepulis commented Aug 25, 2026
View reviewed changes
Comment thread site/src/content/docs/how-to/build-your-own-component.mdx Outdated
Comment thread site/src/docs.config.ts Outdated
Comment thread site/src/content/docs/concepts/custom-element-lifecycle.mdx
@decepulis
decepulis force-pushed the codex/docs-audit-23-custom-element-lifecycle branch from 55bca50 to 9489625 Compare August 25, 2026 23:30
@decepulis
decepulis force-pushed the codex/docs-audit-23-custom-element-lifecycle branch from 9489625 to b72a9c5 Compare August 25, 2026 23:47
@decepulis
decepulis marked this pull request as ready for review August 26, 2026 00:00
@decepulis
decepulis force-pushed the codex/docs-audit-23-custom-element-lifecycle branch from b72a9c5 to 02e65b3 Compare August 26, 2026 00:13
@decepulis
decepulis force-pushed the codex/docs-audit-23-custom-element-lifecycle branch from 02e65b3 to faa8a0a Compare August 26, 2026 02:53
@decepulis
decepulis force-pushed the codex/docs-audit-23-custom-element-lifecycle branch from faa8a0a to 00cf5fd Compare August 26, 2026 03:03
@decepulis
decepulis force-pushed the codex/docs-audit-23-custom-element-lifecycle branch from 00cf5fd to 7e80e90 Compare August 26, 2026 14:13
@decepulis
decepulis merged commit 2f3516a into main Aug 26, 2026
26 checks passed
@decepulis
decepulis deleted the codex/docs-audit-23-custom-element-lifecycle branch August 26, 2026 14:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mihar-22 mihar-22 mihar-22 approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Docs: Write Reference Page for ReactiveElement Lifecycle (destroyCallback, connectedCallback)

2 participants

@decepulis @mihar-22