-
Notifications
You must be signed in to change notification settings - Fork 319
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Secondary property change not reflected when first property set via attribute #965
Comments
Sorry for the delay on this. We're looking at addressing the issue here, but we're concerned about potentially degrading performance. We also view this as somewhat of a corner case. In the meantime, you can workaround the issue by computing the secondary property in https://stackblitz.com/edit/property-reflect-bug-mrjep4?file=my-element.js |
It is now possible to set a computed reflecting property in another property's setter as long as `requestUpdate` is called before setting the computed property. Note, this does require a slightly user code modification to address #965 but it addresses the use case without degrading performance by adding per-property tracking (which is the other alternative).
sorvell, thank you for the PR and the workaround. I'm facing the same problem. I didn't think it was so "corner case". I have an element with 2 reflected attributes/properties:
Making those assignments through properties works fine. But making them via attributes doesn't: in the second scenario, 2 attribute changes should be triggered, but only |
We got this problem too. after any changes on 'myObject' occurs. |
* Streamlines some internal private API * renamed `_getUpdateComplete` to `getUpdateComplete` * when a reflecting property is undefined, its attribute is removed (previously it was unchanged) * dirty check in `attributeChangedCallback` removed (requested by user) * Fixes lit/lit-element#965
Refactor UpdatingElement * Streamlines some internal private API * renamed `_getUpdateComplete` to `getUpdateComplete` * when a reflecting property is undefined, its attribute is removed (previously it was unchanged) * dirty check in `attributeChangedCallback` removed (requested by user) * Fixes lit/lit-element#965 * Additional minor refactoring * Also fixes an issue where the default fromAttribute function was not run if only a toAttribute function was set. * Reduces code size for instanceProperties * Removes `hasFInalized` in favor of returning true from `finalize` if the element needed to finalize. * Separates decorators into individual modules * Also separates decorators tests. * Moved tests around so decorators are only used in tests for those decorators.
Refactor LitElement and UpdatingElement LitElement * removes all polyfill code and places in `lit-element-polyfill` which is an in place patch and must be loaded separately (preserves support for styling shadowRoot without adoptedStylesheets). * Includes caching of CSSResult (adopted from lit/lit-element#952) * `finalizeStyles` is now the main entry point for gathering element styles and can be overridden to customize. It is called once per class in `finalize`. * `adoptStyles` is now always called, previously was only called if renderRoot was a shadowRoot. * [lit-element] Refactor UpdatingElement (#1240) UpdatingElement * Streamlines some internal private API * renamed `_getUpdateComplete` to `getUpdateComplete` * when a reflecting property is undefined, its attribute is removed (previously it was unchanged) * dirty check in `attributeChangedCallback` removed (requested by user) * Fixes lit/lit-element#965 * Additional minor refactoring * Also fixes an issue where the default fromAttribute function was not run if only a toAttribute function was set. * Reduces code size for instanceProperties * Separates decorators into individual modules * Also separates decorators tests. * Moved tests around so decorators are only used in tests for those decorators.
Closing as this is fixed in the current Lit version and there are no plans to change the behavior in the previous version of LitElement. See https://lit.dev/playground/#gist=9a6934613b6204e035a3baff1fa54a3e. |
Description
When a second property is changed internally due to a change in another property via setting its attribute, the second property is not reflected as expected (given
reflect: true
). For example, given the following element, where settingmyprop
in turn changes another property_someprop
, the change to_someprop
does not get reflected ifmyprop
was changed viasetAttribute/removeAttribute
:From @arthurevans (Slack thread):
As Arthur mentioned, waiting for the first property update to render before changing the second property works around the issue but results in more than one render.
Live Demo
https://stackblitz.com/edit/property-reflect-bug?file=my-element.js
Steps to Reproduce
myprop
via attribute_someprop
change is not reflected to it's corresponding attribute as expectedor...
myprop
via attribute_someprop
change is not reflected to it's corresponding attribute as expectedExpected Results
The second property change should be reflected to its corresponding attribute (given
reflect: true
) without requiring the second iteration ofrender
.Actual Results
The second property change is not reflected to its corresponding attribute.
Browsers Affected
Versions
The text was updated successfully, but these errors were encountered: