Styling shadow-dom elements in audio element on webkit / chrome

Question

Background: I am trying to fix two annoyances in the appearance of the audio element in Chrome and while attempting to do so I came across two issues I would like to understand better. This is about Chrome 89 on MacOS. I nicely manage to style inside the audio element, using pseudo selectors. Finding out about the names of the pseudo selectors works nicely when looking inside of the shadow dom with the dom inspector. For example, the following two rules work exactly as expected:

::-webkit-media-controls-timeline {background-color:pink;} audio::-webkit-media-controls-time-remaining-display {background-color:lightgrey;}

Question: However, two things do not work as expected and I want to understand why.

Problem 1: Styling the first letter in the remaining-display div does not work. The following rule is not effective.

audio::-webkit-media-controls-time-remaining-display:first-letter {color:white;}

This is astonishing, since the browser dispplays this

<style>div:first-letter {color:red;}</style>... <div>e xample</div>

as expected. Why would I be unable to style the first letter? (The idea of this is to get rid of the most annoying leading / symbol in the remaining time display).

Problem 2:

Why would I be unable to style an element with a different pseudo attribute in a different part of the shadow DOM. More precisely the following rule is not effective:

::-internal-track-segment-highlight-before {background-color: blue;}

I see no difference to the other case above where the color styling worked. (The idea of this is to increase the too small contrast between two parts of the track segment.)

Add on: I managed to improved the contrast a bit using

audio::-webkit-media-controls-timeline {-webkit-filter: brightness(2.5);}

but the issue remains why the one method worked and the other did not work.

Answer 1

You are using Chrome, with "Show user agent shadow DOM" turned on

There are 2 types of shadowDOM

• let's call it " userland " shadowDOM,
  the (open or closed) shadowDOM created by a (3rd party developer) Custom Element/Web Component

  This type is available since the W3C Web Components standard was implemented

• " user-agent " shadowDOM created by each Browser (Vendor),
  implementing input , audio , video , select etc. tags
  but each Browser can have a different implementation.

  

  This shadowDOM content can only be accessed if the Browser vendor has enabled access. (with shadowParts or related tech) And in general it can not be accessed.

  WebKit does have some pseudo selectors to change some settings
  See: Is it possible to style html5 audio tag?

  But they are not CSS selectors that get you full access to shadowDOM by creating complex selectors.

  Some Font and Styling settings do cascade into shadowDOM only to have a consistent style in the whole page.
  See: https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/

So that is why your color:red works, and :first-letter doesn't

That is why filter works; and background-color doesn't

alternative

https://github.com/dascritch/cpu-audio is a decent Web Component replacing the standard <audio> tag , that gets you styling in all browsers

Note the notation: (open) not (user-agent)

Answer 2

video::-webkit-media-controls-timeline {
        background-color: blue !important;
}

work better for highter contrast.

(tested in video tag)