Reintroduce suppressTemplateNotifications and gate Dom-change & renderedItemCount on that.

Matches Polymer 1 setting for better backward compatibility.

Author: kevinpschaaf

lib/elements/dom-if.js

@@ -15,7 +15,7 @@ import { microTask } from '../utils/async.js';
 import { root } from '../utils/path.js';
 import { wrap } from '../utils/wrap.js';
 import { hideElementsGlobally } from '../utils/hide-template-controls.js';
-import { fastDomIf, strictTemplatePolicy, legacyOptimizations } from '../utils/settings.js';
+import { fastDomIf, strictTemplatePolicy, suppressTemplateNotifications } from '../utils/settings.js';
 import { showHideChildren, templatize } from '../utils/templatize.js';
 
 /**
@@ -66,7 +66,7 @@ class DomIfBase extends PolymerElement {
       },
 
       /**
-       * When the global `legacyOptimizations` setting is used, setting
+       * When the global `suppressTemplateNotifications` setting is used, setting
        * `notifyDomChange: true` will enable firing `dom-change` events on this
        * element.
        */
@@ -252,7 +252,8 @@ class DomIfBase extends PolymerElement {
       this.__teardownInstance();
     }
     this._showHideChildren();
-    if ((!legacyOptimizations || this.notifyDomChange) && this.if != this._lastIf) {
+    if ((!suppressTemplateNotifications || this.notifyDomChange) 
+        && this.if != this._lastIf) {
       this.dispatchEvent(new CustomEvent('dom-change', {
         bubbles: true,
         composed: true

lib/elements/dom-repeat.js

@@ -17,7 +17,7 @@ import { matches, translate } from '../utils/path.js';
 import { timeOut, microTask } from '../utils/async.js';
 import { wrap } from '../utils/wrap.js';
 import { hideElementsGlobally } from '../utils/hide-template-controls.js';
-import { legacyOptimizations } from '../utils/settings.js';
+import { suppressTemplateNotifications } from '../utils/settings.js';
 
 /**
  * @constructor
@@ -240,7 +240,7 @@ export class DomRepeat extends domRepeatBase {
        */
       renderedItemCount: {
         type: Number,
-        notify: !legacyOptimizations,
+        notify: !suppressTemplateNotifications,
         readOnly: true
       },
 
@@ -279,7 +279,7 @@ export class DomRepeat extends domRepeatBase {
       },
 
       /**
-       * When the global `legacyOptimizations` setting is used, setting
+       * When the global `suppressTemplateNotifications` setting is used, setting
        * `notifyDomChange: true` will enable firing `dom-change` events on this
        * element.
        */
@@ -555,7 +555,7 @@ export class DomRepeat extends domRepeatBase {
     // Set rendered item count
     this._setRenderedItemCount(this.__instances.length);
     // Notify users
-    if (!legacyOptimizations || this.notifyDomChange) {
+    if (!suppressTemplateNotifications || this.notifyDomChange) {
       this.dispatchEvent(new CustomEvent('dom-change', {
         bubbles: true,
         composed: true

lib/utils/settings.js

@@ -278,3 +278,22 @@ export let fastDomIf = window.Polymer && window.Polymer.fastDomIf || false;
 export const setFastDomIf = function(useFastDomIf) {
   fastDomIf = useFastDomIf;
 };
+
+/**
+ * Setting to disable `dom-change` and `rendered-item-count` events from
+ * `dom-if` and `dom-repeat`. Users can opt back into `dom-change` events by
+ * setting the `notify-dom-change` attribute (`notifyDomChange: true` property)
+ * to `dom-if`/`don-repeat` instances.
+ */
+export let suppressTemplateNotifications =
+  window.Polymer && window.Polymer.suppressTemplateNotifications || false;
+
+/**
+ * Sets `fastDomIf` globally, to put `dom-if` in a performance-optimized mode.
+ *
+ * @param {boolean} suppress enable or disable `suppressTemplateNotifications`
+ * @return {void}
+ */
+export const setSuppressTemplateNotifications = function(suppress) {
+  suppressTemplateNotifications = suppress;
+};