Kevin Powell - Community•7mo ago

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>

<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. edit: restored original names

fluffybacon-steam

CodePen

dyENayJ

...

7 Replies

fluffy baconOP•7mo ago

While I would like to know the answer to why shadowRoot is never defined, I must now shill for npm media-chrome for an easily customizer player which I am now using for my needs.

glutonium•7mo ago

player-s is not even a valid variable name dash is not valid when variable naming in JS we follow camelCase notation first letter of the first word is lowercase every other first letter of the following words r capital playerS

glutonium•7mo ago

about shadowRoot being undefined doed it meet the 2 criterias?

glutonium•7mo ago

being made with Element.attachShadow() and the mode option set to open also where is the the element d ?

fluffy baconOP•7mo ago

sorry that was sloppy... I renamed the variables ad hoc so they'd make sense. I assumed attachShadow() would make a new shadowRoot when all I want to do is alter the original root. Attaching a codepen below https://codepen.io/fluffybacon-steam/pen/dyENayJ Uncaught NotSupportedError: Failed to execute 'attachShadow' on 'Element': This element does not support attachShadow

fluffy baconOP•7mo ago

How can element not support attachShadow when it already has a shadow?

MarkBoots•7mo ago

I don't think you can access/alter a Shadow Dom created by the browser #shadow-root (user-agent) They've build it the way they want it and probably restrict manipulation

Gaming

Programming

Trying to inject styles in shadow-dom but element.shadowRoot is always null