title: Styling shadow-dom elements in audio element on webkit / chrome
body: <p><strong>Background:</strong> 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:</p>
  <p><code>::-webkit-media-controls-timeline {background-color:pink;}</code>
  <code>audio::-webkit-media-controls-time-remaining-display {background-color:lightgrey;} </code></p>
  <p><strong>Question:</strong> However, two things do not work as expected and I want to understand why.</p>
  <p><strong>Problem 1:</strong> Styling the first letter in the remaining-display div does not work. The following rule is not effective.</p>
  <p><code>audio::-webkit-media-controls-time-remaining-display:first-letter {color:white;}</code></p>
  <p>This is astonishing, since the browser dispplays this</p>
  <p><code>&lt;style&gt;div:first-letter {color:red;}&lt;/style&gt;   ...  &lt;div&gt;e xample&lt;/div&gt;</code></p>
  <p>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).</p>
  <p><strong>Problem 2:</strong></p>
  <p>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:</p>
  <p><code>::-internal-track-segment-highlight-before {background-color: blue;}</code></p>
  <p>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.)</p>
  <p>Add on: I managed to improved the contrast a bit using</p>
  <p><code>audio::-webkit-media-controls-timeline {-webkit-filter: brightness(2.5);}</code></p>
  <p>but the issue remains why the one method worked and the other did not work.</p>