is it possible to add bindings to an element that exists outside of the component?

I’m building a browser extension that uses Svelte for it’s UI components and in it I am making use of <video> elements that live outside of my components (they are part of the hosting page so I don’t control their creation), however I am creating instance objects of them and passing them to my component’s constructor.

i.e.

const videoElements = document.getElementsByTagName('video');

for (let i = 0; i < videoElements.length; ++i) {
    const videoElement = videoElements[i];
 }

const mySvelteComponent = new ExampleComponent({ target: document.body, props: { video: videoElement } });

Is there any way at all to make use of Svelte’s many media element bindings like bind:currentTime? I know I can manually bind to these things, I was just curious if there is some svelte mechanism to bootstrap an existing DOM element into a Svelte element.

>Solution :

To my knowledge there is no way to do this. Outside of components reactivity is very limited and mainly restricted to using stores and events. You probably will have to manually work with events and the DOM properties here, the code generated by Svelte boils down to this anyway.

(Note that Svelte does not use the timeupdate event to update a currentTime binding but uses requestAnimationFrame instead.)