Add warning for undeclared properties used in bindings.

lib/mixins/property-effects.js

@@ -18,7 +18,7 @@ import { camelToDashCase, dashToCamelCase } from '../utils/case-map.js';
 import { PropertyAccessors } from './property-accessors.js';
 /* for annotated effects */
 import { TemplateStamp } from './template-stamp.js';
-import { sanitizeDOMValue } from '../utils/settings.js';
+import { sanitizeDOMValue, legacyOptimizations } from '../utils/settings.js';
 
 // Monotonically increasing unique ID used for de-duping effects triggered
 // from multiple properties in the same turn
@@ -2390,6 +2390,9 @@ export const PropertyEffects = dedupingMixin(superClass => {
      * @protected
      */
     static _addTemplatePropertyEffect(templateInfo, prop, effect) {
+      if (legacyOptimizations && !(prop in templateInfo.dynamicFns)) {
+        console.warn(`Property '${prop}' used in template but not declared in 'properties'.`);
+      }
       let hostProps = templateInfo.hostProps = templateInfo.hostProps || {};
       hostProps[prop] = true;
       let effects = templateInfo.propertyEffects = templateInfo.propertyEffects || {};

test/unit/property-effects.html

@@ -25,8 +25,8 @@
 
 <script type="module">
 import './property-effects-elements.js';
-import { Polymer } from '../../lib/legacy/polymer-fn.js';
-import { setSanitizeDOMValue, sanitizeDOMValue } from '../../lib/utils/settings.js';
+import { Polymer, html } from '../../polymer-legacy.js';
+import { setSanitizeDOMValue, sanitizeDOMValue, setLegacyOptimizations } from '../../lib/utils/settings.js';
 import { PropertyEffects } from '../../lib/mixins/property-effects.js';
 
 suite('single-element binding effects', function() {
@@ -1872,6 +1872,34 @@
     document.body.removeChild(el);
   });
 
+});
+
+suite('warn on legacy differences', () => {
+
+  setup(function() {
+    setLegacyOptimizations(true);
+    sinon.spy(console, 'warn');
+  });
+
+  teardown(function() {
+    setLegacyOptimizations(false);
+    console.warn.restore();
+  });
+
+  test('warn if non-declared property used in binding', () => {
+    Polymer({
+      is: 'x-warn-undeclared-binding',
+      _template: html`
+        <div attr$="[[undeclaredToAttr]]"
+             prop="[[undeclaredToProp]]">
+             [[undeclaredToText]]</div>`
+    });
+    const el = document.createElement('x-warn-undeclared-binding');
+    document.body.appendChild(el);
+    document.body.removeChild(el);
+    assert.equal(console.warn.callCount, 3);
+  });
+
 });
 </script>