Trying to inject styles in shadow-dom but element.shadowRoot is always null
SOLVED: Shadow Dom created by the browser cannot be altered. I am trying to style the timeline of an audio player and need to inject a stylesheet into the shadow-dom to do this (::-webkit are not enough).
<audio id="audio-player" controls> <source src="<?= $music_mp3 ?>" type="audio/mpeg"> Your browser does not support the audio element.</audio>
<audio id="audio-player" controls> <source src="<?= $music_mp3 ?>" type="audio/mpeg"> Your browser does not support the audio element.</audio>
`
after the page is loaded, I go into the dev console and
const d = document.querySelector('#audio-player');const ds = d.shadowRoot;
const d = document.querySelector('#audio-player');const ds = d.shadowRoot;
player is defined but player-s is always undefined. Its driving me insane because I really don't want to have to make my own player when all I want to do is change some colors.