observe shadow root child nodes

Author: valdrinkoshi

inert.js

@@ -69,13 +69,44 @@ class InertRoot {
     // Make all focusable elements in the subtree unfocusable and add them to _managedNodes
     this._makeSubtreeUnfocusable(this._rootElement);
 
+    const boundOnMutation = this._onMutation.bind(this);
     // Watch for:
     // - any additions in the subtree: make them unfocusable too
     // - any removals from the subtree: remove them from this inert root's managed nodes
     // - attribute changes: if `tabindex` is added, or removed from an intrinsically focusable element,
     //   make that node a managed node.
-    this._observer = new MutationObserver(this._onMutation.bind(this));
+    this._observer = new MutationObserver(boundOnMutation);
     this._observer.observe(this._rootElement, { attributes: true, childList: true, subtree: true });
+
+    // Watch for:
+    // - any additions in the shadowRoot subtree: make them unfocusable too
+    // - any removals from the shadowRoot subtree: remove them from this inert root's managed nodes
+    const rootObserver = new MutationObserver(boundOnMutation);
+    const shadowRoot = this._rootElement.shadowRoot || this._rootElement.webkitShadowRoot;
+    if (shadowRoot) {
+      rootObserver.observe(shadowRoot, { childList: true, subtree: true });
+    } else {
+      // Might create a shadowRoot in the future, either by attachShadow
+      // (ShadowDOM v1) or by createShadowRoot (ShadowDOM v0), so we patch both
+      // of them.
+      const attachShadowFn = this._rootElement.attachShadow;
+      if (attachShadowFn) {
+        this._rootElement.attachShadow = function patchedAttachShadow() {
+          const shadowRoot = attachShadowFn.apply(this, arguments);
+          rootObserver.observe(shadowRoot, { childList: true, subtree: true });
+          return shadowRoot;
+        };
+      }
+      const createShadowRootFn = this._rootElement.createShadowRoot;
+      if (createShadowRootFn) {
+        this._rootElement.createShadowRoot = function patchedCreateShadowRoot() {
+          const shadowRoot = createShadowRootFn.apply(this, arguments);
+          rootObserver.observe(shadowRoot, { childList: true, subtree: true });
+          return shadowRoot;
+        };
+      }
+    }
+    this._rootObserver = rootObserver;
   }
 
   /**
@@ -86,6 +117,9 @@ class InertRoot {
     this._observer.disconnect();
     delete this._observer;
 
+    this._rootObserver.disconnect();
+    delete this._rootObserver;
+
     if (this._rootElement)
       this._rootElement.removeAttribute('aria-hidden');
     delete this._rootElement;

test/index.js

@@ -149,6 +149,34 @@ describe('Basic', function() {
         expect(isUnfocusable(shadowButton)).to.equal(true);
       });
 
+      it('should apply to elements added to shadow trees later in time', function(done) {
+        host.inert = true;
+        const shadowButton = document.createElement('button');
+        shadowButton.textContent = 'Shadow button';
+        host.shadowRoot.appendChild(shadowButton);
+        // Give time to mutation observers.
+        setTimeout(function() {
+          expect(isUnfocusable(shadowButton)).to.equal(true);
+          done();
+        });
+      });
+
+      it('should apply to elements that create shadow tree later in time', function(done) {
+        fixture.removeChild(host);
+        host = document.createElement('div');
+        fixture.appendChild(host);
+        host.inert = true;
+        const shadowRoot = host.createShadowRoot();
+        const shadowButton = document.createElement('button');
+        shadowButton.textContent = 'Shadow button';
+        shadowRoot.appendChild(shadowButton);
+        // Give time to mutation observers.
+        setTimeout(function() {
+          expect(isUnfocusable(shadowButton)).to.equal(true);
+          done();
+        });
+      });
+
       it('should apply inert styles inside shadow trees', function() {
         const shadowButton = document.createElement('button');
         shadowButton.textContent = 'Shadow button';
@@ -196,6 +224,36 @@ describe('Basic', function() {
         expect(isUnfocusable(shadowButton)).to.equal(true);
       });
 
+      it('should apply to elements added to shadow trees later in time', function(done) {
+        host.inert = true;
+        const shadowButton = document.createElement('button');
+        shadowButton.textContent = 'Shadow button';
+        host.shadowRoot.appendChild(shadowButton);
+        // Give time to mutation observers.
+        setTimeout(function() {
+          expect(isUnfocusable(shadowButton)).to.equal(true);
+          done();
+        });
+      });
+
+      it('should apply to elements that create shadow tree later in time', function(done) {
+        fixture.removeChild(host);
+        host = document.createElement('div');
+        fixture.appendChild(host);
+        host.inert = true;
+        const shadowRoot = host.attachShadow({
+          mode: 'open'
+        });
+        const shadowButton = document.createElement('button');
+        shadowButton.textContent = 'Shadow button';
+        shadowRoot.appendChild(shadowButton);
+        // Give time to mutation observers.
+        setTimeout(function() {
+          expect(isUnfocusable(shadowButton)).to.equal(true);
+          done();
+        });
+      });
+
       it('should apply inert styles inside shadow trees', function() {
         const shadowButton = document.createElement('button');
         shadowButton.textContent = 'Shadow button';