fix(ui5-shellbar): change content slot type (#12186)

Author: kgogov

packages/fiori/src/ShellBar.ts

@@ -559,7 +559,7 @@ class ShellBar extends UI5Element {
 	 * @since 2.7.0
 	 */
 	@slot({ type: HTMLElement, individualSlots: true })
-	content!: Array<UI5Element>;
+	content!: Array<HTMLElement>;
 
 	@i18n("@ui5/webcomponents-fiori")
 	static i18nBundle: I18nBundle;

packages/fiori/src/ShellBarTemplate.tsx

@@ -100,26 +100,26 @@ export default function ShellBarTemplate(this: ShellBar) {
 									}}></div>
 								)}
 								{this.startContent.map(item => {
-									const itemInfo = this._contentInfo.find(info => info.id === item._individualSlot);
+									const itemInfo = this._contentInfo.find(info => info.id === (item as any)._individualSlot);
 									return (
-										<div key={item._individualSlot} id={item._individualSlot} class={itemInfo?.classes}>
+										<div key={(item as any)._individualSlot} id={(item as any)._individualSlot} class={itemInfo?.classes}>
 											{this.shouldIncludeSeparator(itemInfo, this.startContentInfoSorted) && (
 												// never displayed, only "packed" with last item that was hidden, used for measurement purposes
 												<div class={{
 													"ui5-shellbar-separator": true,
 													"ui5-shellbar-separator-start": true,
 												}}></div>
 											)}
-											<slot name={item._individualSlot}></slot>
+											<slot name={(item as any)._individualSlot}></slot>
 										</div>
 									);
 								})}
 								<div class="ui5-shellbar-spacer"></div>
 								{this.endContent.map(item => {
-									const itemInfo = this._contentInfo.find(info => info.id === item._individualSlot);
+									const itemInfo = this._contentInfo.find(info => info.id === (item as any)._individualSlot);
 									return (
-										<div key={item._individualSlot} id={item._individualSlot} class={itemInfo?.classes}>
-											<slot name={item._individualSlot}></slot>
+										<div key={(item as any)._individualSlot} id={(item as any)._individualSlot} class={itemInfo?.classes}>
+											<slot name={(item as any)._individualSlot}></slot>
 											{this.shouldIncludeSeparator(itemInfo, this.endContentInfoSorted) && (
 												// never displayed, only "packed" with last item that was hidden, used for measurement purposes
 												<div class={{