support for shadow root as `container`

Author: patrickkmatiasCreated Jul 26, 2023Updated May 21, 2024
LabelsTYPE: Question

Is your support request related to a problem? Please describe. I'm creating a webapp using web components and I'm trying to lazy load a video that's inside my component, which has a shadow root, and to access its elements it's only possible accessing first the shadowRoot prop. and then selecting it with querySelector() for example.

So I try to use a shadow root prop. as value for the container property of the options object like this:

javascript
const lazy = new LazyLoad({
      container: document
        .querySelector("home-page")
        .shadowRoot.querySelector("contact-section").shadowRoot,
    });

and it throws the following error:

TypeError: Failed to construct 'IntersectionObserver': Failed to read the 'root' property from 'IntersectionObserverInit': The provided value is not of type '(Document or Element)'.
    at lazyload.min.js:1:7380
    at new En (lazyload.min.js:1:7543)
    at main.js:20:18

trying to select contact-section without shadowRoot won't select any element

To Reproduce Create a web component and use it as container for the LazyLoad class, through the options argument.