diff --git a/README.md b/README.md index f7799d02..bf4bf0d6 100644 --- a/README.md +++ b/README.md @@ -275,3 +275,8 @@ Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also ## Known Issues +* On very old versions of Safari (<=9) or Chrome (<=41), properties created for native +platform properties like (`id` or `name`) may not have default values set in the element constructor. +On these browsers native properties appear on instances and therefore their default value +will overwrite any element default (e.g. if the element sets this.id = 'id' in the constructor, +the 'id' will become '' since this is the native platform default). \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7f198a3d..cc5f2811 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1364,9 +1364,9 @@ "dev": true }, "@webcomponents/webcomponentsjs": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.1.0.tgz", - "integrity": "sha512-uc48x6iWiZvfrSc2nhivTIMWpUop+PGbJrH+npVMY0CBeOkUx/I5CUGh1zOVBdLdn0597EM/IKribcCrbtQSQg==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.1.1.tgz", + "integrity": "sha512-CgXV1O94jruR0YVijA55bP4SQBRvRKDmByWce47vCZIJ3HPHOph0VtjpO5vYEUyZzfadqfjICBMkZOagTT9XQw==", "dev": true }, "accepts": { @@ -1720,7 +1720,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -2527,7 +2527,7 @@ }, "cancel-token": { "version": "0.1.1", - "resolved": "https://registry.npmjs.org/cancel-token/-/cancel-token-0.1.1.tgz", + "resolved": "http://registry.npmjs.org/cancel-token/-/cancel-token-0.1.1.tgz", "integrity": "sha1-wYGXZ0uxyEwdaTPr8V2NWlznm08=", "dev": true, "requires": { @@ -2648,7 +2648,7 @@ }, "cleankill": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/cleankill/-/cleankill-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/cleankill/-/cleankill-2.0.0.tgz", "integrity": "sha1-WYMN/ItBHVPccq0J1Fp46jMWGpE=", "dev": true }, @@ -5456,9 +5456,9 @@ } }, "lit-html": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-0.11.0.tgz", - "integrity": "sha512-orv9crT603R/uTF3HYeuL7wRMXy2FuvuB4EvyKX3Gc1eoljN5FCDlawAOL/eOmlAedkSemNeJbMbnAazgy4ieg==" + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-0.11.2.tgz", + "integrity": "sha512-L7nnlgbGyLgYvQn7izgC6IIjMnIOouSeQ7DA9MAgtorx4QHxzK9kJ/XCpTg9ovPwivIHaH53ZrHhd/XqwNl8zg==" }, "load-json-file": { "version": "1.1.0", @@ -5908,7 +5908,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "requires": { @@ -6073,7 +6073,7 @@ }, "chalk": { "version": "0.4.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz", "integrity": "sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8=", "dev": true, "requires": { @@ -6605,7 +6605,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -7427,9 +7427,9 @@ } }, "rollup-plugin-node-resolve": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.3.0.tgz", - "integrity": "sha512-9zHGr3oUJq6G+X0oRMYlzid9fXicBdiydhwGChdyeNRGPcN/majtegApRKHLR5drboUvEWU+QeUmGTyEZQs3WA==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.4.0.tgz", + "integrity": "sha512-PJcd85dxfSBWih84ozRtBkB731OjXk0KnzN0oGp7WOWcarAFkVa71cV5hTJg2qpVsV2U8EUwrzHP3tvy9vS3qg==", "dev": true, "requires": { "builtin-modules": "^2.0.0", @@ -8200,7 +8200,7 @@ }, "stacky": { "version": "1.3.1", - "resolved": "https://registry.npmjs.org/stacky/-/stacky-1.3.1.tgz", + "resolved": "http://registry.npmjs.org/stacky/-/stacky-1.3.1.tgz", "integrity": "sha1-PxF+UYe5pz0j+HbWnwXIWxGAShI=", "dev": true, "requires": { @@ -8222,7 +8222,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -8235,7 +8235,7 @@ }, "lodash": { "version": "3.10.1", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz", + "resolved": "http://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz", "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=", "dev": true }, @@ -8494,7 +8494,7 @@ "dependencies": { "rimraf": { "version": "2.2.8", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz", + "resolved": "http://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz", "integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=", "dev": true, "optional": true @@ -8824,9 +8824,9 @@ "dev": true }, "typescript": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.0.1.tgz", - "integrity": "sha512-zQIMOmC+372pC/CCVLqnQ0zSBiY7HHodU7mpQdjiZddek4GMj31I3dUJ7gAs9o65X7mnRma6OokOkc6f9jjfBg==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.0.3.tgz", + "integrity": "sha512-kk80vLW9iGtjMnIv11qyxLqZm20UklzuR2tL0QAnDIygIUIemcZMxlMWudl9OOt76H3ntVzcTiddQ1/pAAJMYg==", "dev": true }, "typical": { @@ -9315,7 +9315,7 @@ }, "lodash": { "version": "3.10.1", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz", + "resolved": "http://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz", "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=", "dev": true }, @@ -9455,7 +9455,7 @@ }, "request": { "version": "2.85.0", - "resolved": "https://registry.npmjs.org/request/-/request-2.85.0.tgz", + "resolved": "http://registry.npmjs.org/request/-/request-2.85.0.tgz", "integrity": "sha512-8H7Ehijd4js+s6wuVPLjwORxD4zeuyjYugprdOXlPSqaApmL/QOy+EB/beICHVCHkGMKNh5rvihb5ov+IDw4mg==", "dev": true, "requires": { @@ -9532,7 +9532,7 @@ "dependencies": { "@polymer/test-fixture": { "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@polymer/test-fixture/-/test-fixture-0.0.3.tgz", + "resolved": "http://registry.npmjs.org/@polymer/test-fixture/-/test-fixture-0.0.3.tgz", "integrity": "sha1-REN1JpfU2Sk7vEEuoLXk00HxSdk=", "dev": true }, @@ -9573,7 +9573,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -9601,7 +9601,7 @@ }, "lodash": { "version": "3.10.1", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz", + "resolved": "http://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz", "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=", "dev": true }, diff --git a/package.json b/package.json index 9a0bb272..fa588a88 100644 --- a/package.json +++ b/package.json @@ -23,23 +23,23 @@ "devDependencies": { "@types/chai": "^4.0.1", "@types/mocha": "^5.2.4", - "@webcomponents/webcomponentsjs": "^2.1.0", + "@webcomponents/webcomponentsjs": "^2.1.1", "chai": "^4.0.2", "mocha": "^5.0.5", "rollup": "^0.64.1", "rollup-plugin-filesize": "^4.0.1", - "rollup-plugin-node-resolve": "^3.3.0", + "rollup-plugin-node-resolve": "^3.4.0", "rollup-plugin-terser": "^1.0.1", "tslint": "^5.7.0", "typedoc": "^0.8.0", - "typescript": "^3.0.1", + "typescript": "^3.0.3", "uglify-es": "^3.3.9", "wct-browser-legacy": "^1.0.1", "web-component-tester": "^6.8.0" }, "typings": "lit-element.d.ts", "dependencies": { - "lit-html": "^0.11.0" + "lit-html": "^0.11.2" }, "publishConfig": { "access": "public" diff --git a/src/lib/updating-element.ts b/src/lib/updating-element.ts index 6ae2c74d..0f465faa 100644 --- a/src/lib/updating-element.ts +++ b/src/lib/updating-element.ts @@ -325,7 +325,12 @@ export abstract class UpdatingElement extends HTMLElement { * Fixes any properties set on the instance before upgrade time. * Otherwise these would shadow the accessor and break these properties. * The properties are stored in a Map which is played back after the constructor - * runs. + * runs. Note, on very old versions of Safari (<=9) or Chrome (<=41), properties + * created for native platform properties like (`id` or `name`) may not have default + * values set in the element constructor. On these browsers native properties + * appear on instances and therefore their default value will overwrite any element + * default (e.g. if the element sets this.id = 'id' in the constructor, the 'id' + * will become '' since this is the native platform default). */ private _saveInstanceProperties() { for (const [p] of (this.constructor as typeof UpdatingElement)._classProperties) { diff --git a/src/test/lit-element_test.ts b/src/test/lit-element_test.ts index d21a7274..6a32e8e4 100644 --- a/src/test/lit-element_test.ts +++ b/src/test/lit-element_test.ts @@ -1200,6 +1200,8 @@ suite('LitElement', () => { assert.equal(el.getAttribute('zot'), '3'); }); + // Note, on older browsers (e.g. old Safari/Chrome), native properties + // cannot have default values. These will be overwritten by instance values. test('can make properties for native accessors', async () => { class E extends LitElement { @@ -1212,19 +1214,11 @@ suite('LitElement', () => { }; } - name: string; - foo: string; + name: string|undefined; + foo = ''; changedProperties: PropertyValues|undefined = undefined; - constructor() { - super(); - this.id = 'id'; - this.name = 'name'; - this.title = 'title'; - this.foo = 'foo'; - } - update(changedProperties: PropertyValues) { (this as any).zot = (this as any).foo + (this as any).bar; super.update(changedProperties); @@ -1240,12 +1234,11 @@ suite('LitElement', () => { const el = new E() as any; container.appendChild(el); await el.updateComplete; - const testMap = new Map(); - testMap.set('id', undefined); - testMap.set('name', undefined); - testMap.set('title', undefined); - testMap.set('foo', undefined); - assert.deepEqual(el.changedProperties, testMap); + el.foo = 'foo'; + el.id = 'id'; + el.name = 'name'; + el.title = 'title'; + await el.updateComplete; assert.equal(el.shadowRoot!.textContent, 'id-name-title-foo'); assert.equal((window as any).id, el); el.id = 'id2';