Before this change, importing a component module calls the UI5Element.define() base class method, which triggers some async work before calling customElements.define()
This causes frameworks like vuejs and react that check for property existence via prop in el to run before the element is defined, this check returns false and such frameworks set attributes (most notably boolean) as string resulting in checked="false" being treated as true by the components
With this change, the async work is triggered in the beginning of the define() call, but not awaited and customElements.define() runs as soon as the component is imported. The async work (waiting for the theme and i18n assets to be fetched) is now awaited in the connectedCallback so that the component is rendered once with the correct theme and language.
It is no longer necessary to call define() on the dependencies and to await this, as the dependencies are imported for use in the decorator, so their define() calls would have been executed and the elements will be defined by that point, since they also have synchronous define.
Before this change, importing a component module calls the
UI5Element.define()base class method, which triggers some async work before callingcustomElements.define()This causes frameworks like vuejs and react that check for property existence via
prop in elto run before the element is defined, this check returns false and such frameworks set attributes (most notably boolean) as string resulting inchecked="false"being treated astrueby the componentsWith this change, the async work is triggered in the beginning of the
define()call, but not awaited andcustomElements.define()runs as soon as the component is imported. The async work (waiting for the theme and i18n assets to be fetched) is now awaited in theconnectedCallbackso that the component is rendered once with the correct theme and language.It is no longer necessary to call
define()on the dependencies and to await this, as the dependencies are imported for use in the decorator, so theirdefine()calls would have been executed and the elements will be defined by that point, since they also have synchronous define.