Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
14 replies
fluffy bacon

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).

edit: Now this codepen
https://codepen.io/fluffybacon-steam/pen/dyENayJ

<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;


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.

edit: restored original names
CodePenfluffybacon-steam
dyENayJ
...
dyENayJ
Was this page helpful?