Issues with document.getElementById
Hello,
I'm using svelte 4.2.18.
I need to integrate a library in a project that loads some div that contain a video dynamically by specifying the id of the container. The issue is that the getElementById always returns null.
The lib woks that way so I can't use <div bind:this={someVar} />
<script lang="ts">
export let src;
let rmpVast: any;
const id = "rmp-container-vast";
let elementRMP: any;
onMount(() => {
// here we should be able to get the element but it fails so also the library fails to load.
elementRMP = document.getElementById(id);
console.log("elementRMP: ", elementRMP); // always null
initVast();
});
const initVast = () => {
const params = {
...
};
rmpVast = new RmpVast(id, params); // 💥 this lib only works by specifying the id of the div
rmpVast.initialize();
rmpVast.loadAds(src);
}
</script>
<div id="rmp-container-vast" class="rmp-container">
<div class="rmp-content">
<video class="rmp-video" playsinline controls>
</video>
</div>
</div>
I've also tried other ways that use $: elementRMP = document.getElementById(id) but that also doesn't work.
EDIT:
I've realised the thing is inside a shadowRoot
