Re: [w3c/webcomponents] Discussion: child elements cannot determine whether they are "active" or not (#817)

another interesting suggestion that I got from a co-worker who is working on perf, is that the [Page Visibility API](https://www.w3.org/TR/2017/PR-page-visibility-2-20171017/) can be probably extended to cover ShadowRoot as well. Something like:

```js
class Foo extends HTMLElement {
    constructor() {
        ...
    }
    connectedCallback() {
        const videoElement = this.#shadowRoot.getElementById("videoElement");
        // Autoplay the video if element is visible
        if (this.#shadowRoot.visibilityState == "visible") {
            videoElement.play();
        }

        // Handle element visibility change events
        this.#shadowRoot.addEventListener('visibilitychange', () => {
            if (this.visibilityState == "hidden") {
                videoElement.pause();
            } else {
                videoElement.play();
            }
        }, false);
    }
}
```

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/817#issuecomment-500135421