CSS Parts

CSS Parts let you style specific internal elements from outside the Shadow DOM using the ::part() pseudo-element. This gives full control over individual components without modifying the library.

Usage

py-audio::part(btn-play) {
  background: linear-gradient(135deg, #ff6b6b, #feca57);
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

Shared Parts (audio + video)

Part	Element	Description
root	Outer container	Top-level wrapper element
top-bar	Title bar	Header with player title
controls	Button group	Container for playback buttons
btn-play	Play/pause button	Main playback toggle
btn-prev	Previous button	Go to previous track/chapter
btn-next	Next button	Go to next track/chapter
progress	Progress bar track	Full-width clickable progress area
progress-fill	Filled portion	Portion of progress bar that is filled
progress-thumb	Drag handle	Draggable thumb on progress bar
playlist	Playlist container	Wraps all track/chapter items
playlist-item	Track/chapter row	Individual entry in the playlist
upload-area	Upload zone	Clickable area for file upload
now-playing	Track display	Shows current track name

Audio-only Parts

Part	Element	Description
visualizer	Visualizer container	Wraps the frequency bars
viz-bar	Frequency bar	Individual bar in the visualizer

Video-only Parts

Part	Element	Description
video-container	Video wrapper	Contains the <video> element
video-controls	Controls bar	Bottom overlay with all controls
volume-slider	Volume control	Slider for adjusting volume
fullscreen-btn	Fullscreen toggle	Button to enter/exit fullscreen

Examples

Custom play button

py-audio::part(btn-play) {
  background: #7c4dff;
  color: white;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 18px;
}

Styled progress bar

py-audio::part(progress) {
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
}

py-audio::part(progress-fill) {
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  border-radius: 3px;
}

py-audio::part(progress-thumb) {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

Custom outer container

py-audio::part(root) {
  border: 2px solid #7c4dff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(124, 77, 255, 0.2);
}

Playlist item styling

py-audio::part(playlist-item) {
  border-radius: 6px;
  padding: 8px 12px;
  transition: background 0.15s;
}

Visualizer bars

py-audio::part(viz-bar) {
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #ff6b6b, #feca57);
}

Video controls

py-video::part(video-controls) {
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 20px 16px 12px;
}

py-video::part(fullscreen-btn) {
  opacity: 0.8;
}

py-video::part(fullscreen-btn):hover {
  opacity: 1;
}