Change to attribute passed to child does not trigger update

[cuberoot]

I have a case where I have a parent LitElement component which renders a child LitElement component. I am trying to propagate a property to the child element. The change to the parent property comes from an outside source, but I am calling requestUpdate on the parent component.

The property is passed to the child component. And, the child component's attributeChangedCallback callback is called and LitElement does detect it. However, the child component's render is never called in response to the update. If I manually call requestUpdate on the child component from the console, the component updates correctly.

Live Demo

https://codesandbox.io/s/litelement-attribute-propigation-yw02g

Steps to Reproduce

See live demo above.

After a 5s delay, the parent component set's its own authToken property and calls requestUpdate. You can see that the child component does not update in response.

App: has token
Child: no token

Expected Results

I would expect the child component to re-render in response to the change to one of its attributes. The output should say.

App: has token
Child: has token

Actual Results

Child component does not re-render and you get the output

App: has token
Child: no token

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Versions

• lit-element: v2.2.1

[justinfagnani]

The problem here seems to be the Babel transform for class fields. For some reason, even though loose is true, it's still compiling fields to an Object.defineProperty call which is shadowing the accessors made by LitElement.

You can see this with just one element: you shouldn't need to call this.requestUpdate() in the timeout callback of the parent element.

This could also be a problem with our decorator implementation, probably exposed by an update to Babel. We return a fake descriptor for the field, with placement: 'own' here: https://github.com/Polymer/lit-element/blob/master/src/lib/decorators.ts#L114.

We're using 7.7.4 of @babel/plugin-proposal-decorators in tests and the latest is 7.8.3.

[cuberoot]

I tried forcing all of my local project's dependencies down to v7.7.x, but I am still seeing the issue. I am not using Parcel in my local project. I am explicitly compiling with babel.

"@babel/cli": "7.7.7",
"@babel/core": "7.7.7",
"@babel/plugin-proposal-class-properties": "7.7.4",
"@babel/plugin-proposal-decorators": "7.7.4",
"@babel/plugin-proposal-optional-chaining": "7.7.5",
"@babel/preset-env": "7.7.7",

This is my .babel.config.js:

module.exports = {
	presets: [
		[
			"@babel/preset-env",
			{
				"targets": {
					"esmodules": true
				},
				"modules": "false",
				"useBuiltIns": false
			}
		]
	],
	plugins: [
		'snowpack/assets/babel-plugin.js',
		["@babel/plugin-proposal-decorators", { "legacy": true }],
		["@babel/plugin-proposal-class-properties", { "loose" : true }],
		'@babel/plugin-proposal-optional-chaining',
		'transform-node-env-inline',
	]
}

[cuberoot]

I will try dropping the decorator syntax for now.

[blikblum]

["@babel/plugin-proposal-decorators", { "legacy": true }],

It does not works with legacy option: #205

Here's a working setup: https://github.com/blikblum/nextbone-contact-manager/blob/master/babel.config.js

[cuberoot]

Yep, that was the problem. Everything updates correctly with non-legacy decorators. Thanks @blikblum !

[kevinpschaaf]

Ok, given you're unblocked, I'm going to close this issue as we already have issue #205 open to track support for legacy babel decorators.