diff --git a/tensorboard/components/tf_paginated_view/test/categoryPaginatedViewTests.ts b/tensorboard/components/tf_paginated_view/test/categoryPaginatedViewTests.ts
index 4969f8c129..9e0f0d7dd8 100644
--- a/tensorboard/components/tf_paginated_view/test/categoryPaginatedViewTests.ts
+++ b/tensorboard/components/tf_paginated_view/test/categoryPaginatedViewTests.ts
@@ -156,6 +156,33 @@ namespace tf_paginated_view {
       expect(_getPageCount()).to.equal(5);
     });
 
+    it('sets all items to active=true when opened is true', () => {
+      expect(getItem('id0').hasAttribute('active')).to.be.true;
+      expect(getItem('id1').hasAttribute('active')).to.be.true;
+    });
+
+    it('sets all items to active=false when opened is false', async () => {
+      querySelector('button').click();
+      await flushAllP();
+
+      expect(getItem('id0').hasAttribute('active')).to.be.false;
+      expect(getItem('id1').hasAttribute('active')).to.be.false;
+    });
+
+    it('sets item to inactive when it is out of view', async () => {
+      // The DOM will be removed from document but it will be updated. Hold
+      // references to them here.
+      const item0 = getItem('id0');
+      const item1 = getItem('id1');
+
+      await goNext();
+
+      expect(item0.hasAttribute('active')).to.be.false;
+      expect(item1.hasAttribute('active')).to.be.false;
+      expect(getItem('id2').hasAttribute('active')).to.be.true;
+      expect(getItem('id3').hasAttribute('active')).to.be.true;
+    });
+
     function _getPageCount(): number {
       return view.$.view._pageCount;
     }
diff --git a/tensorboard/components/tf_paginated_view/test/tests.html b/tensorboard/components/tf_paginated_view/test/tests.html
index 49b6c07573..ef11987392 100644
--- a/tensorboard/components/tf_paginated_view/test/tests.html
+++ b/tensorboard/components/tf_paginated_view/test/tests.html
@@ -32,7 +32,11 @@
         category="[[category]]"
       >
         <template>
-          <span id$="[[item.id]]" number$="[[randomNumber]]">
+          <span
+            id$="[[item.id]]"
+            number$="[[randomNumber]]"
+            active$="[[active]]"
+          >
             [[item.content]]
           </span>
         </template>
diff --git a/tensorboard/components/tf_paginated_view/tf-category-paginated-view.html b/tensorboard/components/tf_paginated_view/tf-category-paginated-view.html
index ec6ef913bc..9b11286932 100644
--- a/tensorboard/components/tf_paginated_view/tf-category-paginated-view.html
+++ b/tensorboard/components/tf_paginated_view/tf-category-paginated-view.html
@@ -268,6 +268,11 @@
           readOnly: true,
         },
 
+        _contentActive: {
+          type: Boolean,
+          computed: '_computeContentActive(opened)',
+        },
+
         disablePagination: {
           type: Boolean,
           value: false,
@@ -393,6 +398,10 @@
         this._setOpened(!this.opened);
       },
 
+      _computeContentActive() {
+        return this.opened;
+      },
+
       _onPaneRenderedChanged(newRendered, oldRendered) {
         if (newRendered && newRendered !== oldRendered) {
           // Force dom-if render without waiting for one rAF.
diff --git a/tensorboard/components/tf_paginated_view/tf-dom-repeat.html b/tensorboard/components/tf_paginated_view/tf-dom-repeat.html
index 5e0d535fa2..ff124c4fe7 100644
--- a/tensorboard/components/tf_paginated_view/tf-dom-repeat.html
+++ b/tensorboard/components/tf_paginated_view/tf-dom-repeat.html
@@ -48,6 +48,15 @@
           value: 'item',
         },
 
+        /**
+         * Whether all stamped items are active or not.
+         * @protected
+         */
+        _contentActive: {
+          type: Boolean,
+          value: true,
+        },
+
         _domBootstrapped: {
           type: Boolean,
           value: false,
@@ -97,6 +106,7 @@
       observers: [
         '_bootstrapDom(_itemsRendered, isAttached)',
         '_updateDom(_renderedItems.*, _domBootstrapped)',
+        '_updateActive(_contentActive)',
         '_trimCache(_cacheSize)',
       ],
 
@@ -135,7 +145,7 @@
             parentModel: true,
             instanceProps: {
               [this.as]: true,
-              active: true,
+              active: this._contentActive,
             },
             forwardHostProp: function(prop, value) {
               this._renderedTemplateInst.forEach((inst) => {
@@ -166,6 +176,14 @@
         this._domBootstrapped = true;
       },
 
+      _updateActive() {
+        if (!this._domBootstrapped) return;
+
+        Array.from(this._renderedTemplateInst.values()).forEach((inst) => {
+          inst.notifyPath('active', this._contentActive);
+        });
+      },
+
       _updateDom(event) {
         if (!this._domBootstrapped) return;
         // These are uninteresting.
@@ -193,7 +211,7 @@
           if (this._renderedTemplateInst.has(key)) {
             this._renderedTemplateInst
               .get(key)
-              .notifyPath(this.as, event.value, true /* fromAbove */);
+              .notifyPath(this.as, event.value);
           } else {
             console.warn(
               `Expected '${key}' to exist in the DOM but ` +
@@ -213,8 +231,11 @@
         if (this._lruCachedItems.has(key)) {
           fragOrEl = this._lruCachedItems.get(key);
           this._lruCachedItems.delete(key);
+          this._renderedTemplateInst
+            .get(key)
+            .notifyPath('active', this._contentActive);
         } else {
-          const prop = {[this.as]: item, active: true};
+          const prop = {[this.as]: item, active: this._contentActive};
           const inst = new this._ctor(prop);
           fragOrEl = inst.root;
           this._renderedTemplateInst.set(key, inst);
@@ -234,7 +255,9 @@
 
       _removeItem(item, node) {
         Polymer.dom(node.parentNode).removeChild(node);
-        this._lruCachedItems.set(this._getItemKey(item), node);
+        const key = this._getItemKey(item);
+        this._lruCachedItems.set(key, node);
+        this._renderedTemplateInst.get(key).notifyPath('active', false);
       },
 
       _trimCache() {
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html
index efa67b49bf..cf0044dcb9 100644
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html
+++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html
@@ -156,7 +156,7 @@ <h3>No scalar data was found.</h3>
             >
               <template>
                 <tf-scalar-card
-                  active="[[active]"
+                  active="[[active]]"
                   data-to-load="[[item.series]]"
                   ignore-y-outliers="[[_ignoreYOutliers]]"
                   multi-experiments="[[_getMultiExperiments(dataSelection)]]"