diff --git a/demo/selection.html b/demo/selection.html
index 029b62809..0776a745d 100644
--- a/demo/selection.html
+++ b/demo/selection.html
@@ -129,15 +129,18 @@ <h3>Select All with Data Source</h3>
         <datasource-select-all></datasource-select-all>
         <dom-module id="datasource-select-all">
           <template>
-            <style>
-              #grid {
+            <style is="custom-style">
+              #grid[inverted] {
+                --vaadin-grid-body-cell: {
+                  background-color: var(--paper-grey-100);
+                };
                 --vaadin-grid-body-row-selected-cell: {
                   background-color: var(--primary-background-color);
                 };
               }
             </style>
             <x-data-source data-source="{{dataSource}}"></x-data-source>
-            <vaadin-grid id="grid" data-source="[[dataSource]]" size="200">
+            <vaadin-grid id="grid" data-source="[[dataSource]]" inverted$="[[inverted]]" size="200">
               <vaadin-grid-column width="40px" flex-grow="0" >
                 <template class="header">
                   <input type="checkbox" checked="{{inverted::change}}" />
@@ -172,6 +175,7 @@ <h3>Select All with Data Source</h3>
 
               _resetSelection: function(inverted) {
                 this.$.grid.selectedItems = [];
+                this.updateStyles();
               },
 
               _selectItem: function(e) {