diff --git a/lib/elements/dom-if.js b/lib/elements/dom-if.js index e6eca76649..9f641528ae 100644 --- a/lib/elements/dom-if.js +++ b/lib/elements/dom-if.js @@ -63,8 +63,16 @@ class DomIfBase extends PolymerElement { restamp: { type: Boolean, observer: '__debounceRender' - } + }, + /** + * When the global `legacyOptimizations` setting is used, setting + * `notifyDomChange: true` will enable firing `dom-change` events on this + * element. + */ + notifyDomChange: { + type: Boolean + } }; } @@ -244,7 +252,7 @@ class DomIfBase extends PolymerElement { this.__teardownInstance(); } this._showHideChildren(); - if (!legacyOptimizations && this.if != this._lastIf) { + if ((!legacyOptimizations || this.notifyDomChange) && this.if != this._lastIf) { this.dispatchEvent(new CustomEvent('dom-change', { bubbles: true, composed: true diff --git a/lib/elements/dom-repeat.js b/lib/elements/dom-repeat.js index 7ad1a02269..c66b60011d 100644 --- a/lib/elements/dom-repeat.js +++ b/lib/elements/dom-repeat.js @@ -276,6 +276,15 @@ export class DomRepeat extends domRepeatBase { _targetFrameTime: { type: Number, computed: '__computeFrameTime(targetFramerate)' + }, + + /** + * When the global `legacyOptimizations` setting is used, setting + * `notifyDomChange: true` will enable firing `dom-change` events on this + * element. + */ + notifyDomChange: { + type: Boolean } }; @@ -546,7 +555,7 @@ export class DomRepeat extends domRepeatBase { // Set rendered item count this._setRenderedItemCount(this.__instances.length); // Notify users - if (!legacyOptimizations) { + if (!legacyOptimizations || this.notifyDomChange) { this.dispatchEvent(new CustomEvent('dom-change', { bubbles: true, composed: true