search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.56k stars 267 forks source link

MediaGalleryItem: result must not have attributes #4610

Closed MarcusNotheis closed 2 years ago

MarcusNotheis commented 2 years ago

Bug Description

When the Web Components core is booted and a ui5-media-gallery-item is added to the DOM, an error is thrown: image

Expected Behavior

There should be no error thrown

Steps to Reproduce

  1. Open https://codesandbox.io/s/angry-spence-gv19h?file=/src/App.js:215-234
  2. Click on Show Media Gallery Item
  3. See the error

It looks like this is only happening when the UI5 Web Components core is already booted - if you change the useState initial value to true the error isn't thrown

Isolated Example

https://codesandbox.io/s/angry-spence-gv19h?file=/src/App.js

Context

Log Output / Stack Trace / Screenshots

Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes
    at createElement (http://localhost:6006/vendors~main.iframe.bundle.js:111819:34)
    at createInstance (http://localhost:6006/vendors~main.iframe.bundle.js:113016:20)
    at completeWork (http://localhost:6006/vendors~main.iframe.bundle.js:122288:28)
    at completeUnitOfWork (http://localhost:6006/vendors~main.iframe.bundle.js:125634:16)
    at performUnitOfWork (http://localhost:6006/vendors~main.iframe.bundle.js:125606:5)
    at workLoopSync (http://localhost:6006/vendors~main.iframe.bundle.js:125526:5)
    at renderRootSync (http://localhost:6006/vendors~main.iframe.bundle.js:125489:7)
    at performSyncWorkOnRoot (http://localhost:6006/vendors~main.iframe.bundle.js:125112:18)
    at http://localhost:6006/vendors~main.iframe.bundle.js:114151:26
    at unstable_runWithPriority (http://localhost:6006/vendors~main.iframe.bundle.js:137667:12)

Priority

Additional Information

I think this error is related to these lines: https://github.com/SAP/ui5-webcomponents/blob/417bd6aad5829de578cc91487fa080af4699e450/packages/fiori/src/MediaGalleryItem.js#L182-L186 As far as I remember, it is not allowed to set attributes of a custom element in the constructor. I think we had a similar issue with the ui5-button long time ago (something with setting _isTouch or sth) - maybe @vladitasev remembers 🙂

MarcusNotheis commented 2 years ago

Also looks like the icon import for background is missing: https://github.com/SAP/ui5-webcomponents/blob/11e686ffd64fbabc1ed80cff3238a9ebd2d4c234/packages/fiori/src/MediaGalleryItem.hbs#L11-L13 image

ilhan007 commented 2 years ago

Hello @SAP/ui5-webcomponents-topic-p could you take a look of this issue with priority. I will also ask @vladitasev if he remembers the case that Marcus described.

pskelin commented 2 years ago

@MarcusNotheis is right, I found the related previous PR https://github.com/SAP/ui5-webcomponents/issues/3073

Basically the properties should be set in connectedCallback instead of in the constructor.

Here is more information from the spec https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance

relevant parts: