More detach shadow changes

1 files changed, 14 insertions, 0 deletions

diff --git a/resources/media-controls.js b/resources/media-controls.js
index f921b40b0f5..bfb0fb5edf0 100644
--- a/resources/media-controls.js
+++ b/resources/media-controls.js
@@ -74,11 +74,22 @@
 
   class MediaControls {
     constructor() {
+      this.nonce = Date.now();
       // Get the instance of the shadow root where these controls live.
       this.controls = document.servoGetMediaControls("@@@id@@@");
       // Get the instance of the host of these controls.
       this.media = this.controls.host;
 
+      this.shutthingDown = false;
+      this.mutationObserver = new MutationObserver(() => {
+        // We can only get here if the `controls` attribute is removed.
+        this.shutthingDown = true;
+        this.mutationObserver.disconnect();
+      });
+      this.mutationObserver.observe(this.media, {
+        attributeFilter: ["controls"]
+      });
+
       // Create root element and load markup.
       this.root = document.createElement("div");
       this.root.classList.add("root");
@@ -203,6 +214,9 @@
     }
 
     render(from = this.state) {
+      if (this.shutthingDown) {
+        return;
+      }
       const isAudioOnly = this.media.localName == "audio";
       if (!isAudioOnly) {
         // XXX This should ideally use clientHeight/clientWidth,