docs: add FAQ section and mark abstract components

docs/knowledge-base/FAQ.mdx

@@ -0,0 +1,70 @@
+import { Meta } from '@storybook/addon-docs';
+import { Footer, TableOfContent } from '@sb/components';
+import { MessageStrip } from '@ui5/webcomponents-react';
+
+<Meta title="FAQ" />
+
+<TableOfContent />
+
+# FAQ
+
+<MessageStrip
+  hideCloseButton
+  children={
+    <>
+      Please also take a look at the FAQ of{' '}
+      <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-faq">
+        UI5 Web Components
+      </ui5-link>
+      .
+    </>
+  }
+/>
+
+<br />
+<br />
+
+## Why is my Popover or Dialog not rendered correctly?
+
+Mounting popups, like the Popover, inside of components can lead to unwanted side-effects (wrong positioning, alignment, etc.), to prevent that we recommend either mounting it outside of the component, or mounting it with a React portal.
+You can find out more about how we use portals [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-working-with-portals).
+
+## Where can I find all compatible versions of `@ui5/webcomponents` and `@ui5/webcomponents-react`?
+
+All necessary `@ui5/webcomponents` packages are `peerDependencies` of `@ui5/webcomponents-react`, so if you're using npm v7 or later, then these dependencies should be auto installed when running `npm install`.
+If you want to check which versions are compatible you can find a compatibility table [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/getting-started--docs#add-ui5webcomponents-react-to-an-existing-app).
+
+## What are "abstract" UI5 Web Components?
+
+Abstract UI5 Web Components are mainly there to pass props to the actual component inside the shadow root. Therefore, all attributes passed to the element, will have no effect on the actual component.
+
+### Example
+
+Rendering a `ComboBoxItem` with some custom HTML attributes...
+
+```jsx
+<ComboBox>
+  <ComboBoxItem text="ComboBoxItem1" title="Hello" style={{ backgroundColor: 'red' }} />
+</ComboBox>
+```
+
+...will result in an element that looks like this:
+
+```html
+<ui5-cb-item
+  text="ComboBoxItem1"
+  title="Hello"
+  style="background-color: red;"
+  _ui5rt0=""
+  _ui5host=""
+  ui5-cb-item=""
+></ui5-cb-item>
+```
+
+As you can see, both `title` and `style` are correctly applied, but since the item doesn't have children, nor a shadow root the attributes don't have an effect on the component.
+
+## How can I style elements inside the shadow root of a web component?
+
+Styling elements inside the shadow root is only supported by leveraging the [`::part` pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). You can find out more about this [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-styling--docs#css-shadow-parts).
+
+<Footer />

packages/main/scripts/create-web-components-wrapper.mjs

@@ -205,6 +205,7 @@ const createWebComponentWrapper = async (
 
   return await renderComponentWrapper({
     name: componentSpec.module,
+    abstract: componentSpec.abstract,
     imports,
     importSpecifier,
     propTypesExtends: tsExtendsStatement,
@@ -505,9 +506,11 @@ allWebComponents
       const componentWithoutDemo = COMPONENTS_WITHOUT_DEMOS[componentSpec.module];
       // create subcomponent description
       if (typeof componentWithoutDemo === 'string') {
-        if (componentSpec.since) {
-          mainDescription = `<b>Since:</b> ${versionInfo[componentSpec.since]}<br/><br/>` + mainDescription;
-        }
+        const since = componentSpec.since ? `<b>Since:</b> ${versionInfo[componentSpec.since]}<br/>` : '';
+        const abstractDescription = componentSpec.abstract
+          ? `<b>Abstract UI5 Web Component</b> - Find out more about abstract components <a href="https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-faq--docs#what-are-abstract-ui5-web-components" target="_blank">here</a>.<br/><br/>`
+          : '</br>';
+        mainDescription = `${since}${abstractDescription}${mainDescription}`;
         const subComponentDescription = `${await formatDemoDescription(
           mainDescription,
           componentSpec,

packages/main/src/webComponents/Avatar/index.tsx

@@ -109,7 +109,7 @@ export interface AvatarPropTypes extends AvatarAttributes, CommonProps {
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Avatar" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Avatar)
  */
 const Avatar = withWebComponent<AvatarPropTypes, AvatarDomRef>(
   'ui5-avatar',

packages/main/src/webComponents/AvatarGroup/index.tsx

@@ -69,7 +69,7 @@ export interface AvatarGroupPropTypes extends AvatarGroupAttributes, Omit<Common
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-AvatarGroup" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-AvatarGroup)
  */
 const AvatarGroup = withWebComponent<AvatarGroupPropTypes, AvatarGroupDomRef>(
   'ui5-avatar-group',

packages/main/src/webComponents/Badge/index.tsx

@@ -40,7 +40,7 @@ export interface BadgePropTypes extends BadgeAttributes, CommonProps {
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Badge" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Badge)
  */
 const Badge = withWebComponent<BadgePropTypes, BadgeDomRef>(
   'ui5-badge',

packages/main/src/webComponents/Bar/index.tsx

@@ -55,7 +55,7 @@ export interface BarPropTypes extends BarAttributes, CommonProps {
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/fiori-Bar" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/fiori-Bar)
  */
 const Bar = withWebComponent<BarPropTypes, BarDomRef>(
   'ui5-bar',

packages/main/src/webComponents/BarcodeScannerDialog/index.tsx

@@ -43,7 +43,7 @@ export interface BarcodeScannerDialogPropTypes extends BarcodeScannerDialogAttri
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/fiori-BarcodeScannerDialog" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/fiori-BarcodeScannerDialog)
  */
 const BarcodeScannerDialog = withWebComponent<BarcodeScannerDialogPropTypes, BarcodeScannerDialogDomRef>(
   'ui5-barcode-scanner-dialog',

packages/main/src/webComponents/Breadcrumbs/index.tsx

@@ -53,7 +53,7 @@ export interface BreadcrumbsPropTypes extends BreadcrumbsAttributes, CommonProps
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Breadcrumbs" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Breadcrumbs)
  */
 const Breadcrumbs = withWebComponent<BreadcrumbsPropTypes, BreadcrumbsDomRef>(
   'ui5-breadcrumbs',

packages/main/src/webComponents/BreadcrumbsItem/BreadcrumbsItemDescription.md

@@ -1,3 +1,4 @@
-**Since:** 0.18.0
+**Since:** 0.18.0  
+**Abstract UI5 Web Component** - Find out more about abstract components [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-faq--docs#what-are-abstract-ui5-web-components).
 
 The `BreadcrumbsItem` component defines the content of an item in `Breadcrumbs`

packages/main/src/webComponents/BreadcrumbsItem/index.tsx

@@ -48,9 +48,11 @@ export interface BreadcrumbsItemPropTypes extends BreadcrumbsItemAttributes, Com
 /**
  * The `BreadcrumbsItem` component defines the content of an item in `Breadcrumbs`
  *
+ * @abstract
+ *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Breadcrumbs" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Breadcrumbs)
  */
 const BreadcrumbsItem = withWebComponent<BreadcrumbsItemPropTypes, BreadcrumbsItemDomRef>(
   'ui5-breadcrumbs-item',

packages/main/src/webComponents/BusyIndicator/index.tsx

@@ -45,7 +45,7 @@ export interface BusyIndicatorPropTypes extends BusyIndicatorAttributes, CommonP
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-BusyIndicator" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-BusyIndicator)
  */
 const BusyIndicator = withWebComponent<BusyIndicatorPropTypes, BusyIndicatorDomRef>(
   'ui5-busy-indicator',

packages/main/src/webComponents/Button/index.tsx

@@ -109,7 +109,7 @@ export interface ButtonPropTypes extends ButtonAttributes, Omit<CommonProps, 'on
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Button" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Button)
  */
 const Button = withWebComponent<ButtonPropTypes, ButtonDomRef>(
   'ui5-button',

packages/main/src/webComponents/Calendar/index.tsx

@@ -65,7 +65,7 @@ export interface CalendarPropTypes extends CalendarAttributes, CommonProps {
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Calendar" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Calendar)
  */
 const Calendar = withWebComponent<CalendarPropTypes, CalendarDomRef>(
   'ui5-calendar',

packages/main/src/webComponents/CalendarDate/CalendarDateDescription.md

@@ -1 +1,3 @@
+**Abstract UI5 Web Component** - Find out more about abstract components [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-faq--docs#what-are-abstract-ui5-web-components).
+
 The `CalendarDate` component defines a calendar date to be used inside `Calendar`

packages/main/src/webComponents/CalendarDate/index.tsx

@@ -18,9 +18,11 @@ export interface CalendarDatePropTypes extends CalendarDateAttributes, CommonPro
 /**
  * The `CalendarDate` component defines a calendar date to be used inside `Calendar`
  *
+ * @abstract
+ *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Calendar" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Calendar)
  */
 const CalendarDate = withWebComponent<CalendarDatePropTypes, CalendarDateDomRef>(
   'ui5-date',

packages/main/src/webComponents/Card/index.tsx

@@ -43,7 +43,7 @@ export interface CardPropTypes extends CardAttributes, CommonProps {
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Card" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Card)
  */
 const Card = withWebComponent<CardPropTypes, CardDomRef>(
   'ui5-card',

packages/main/src/webComponents/CardHeader/index.tsx

@@ -60,7 +60,7 @@ export interface CardHeaderPropTypes extends CardHeaderAttributes, Omit<CommonPr
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Card" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Card)
  */
 const CardHeader = withWebComponent<CardHeaderPropTypes, CardHeaderDomRef>(
   'ui5-card-header',

packages/main/src/webComponents/Carousel/index.tsx

@@ -101,7 +101,7 @@ export interface CarouselPropTypes extends CarouselAttributes, CommonProps {
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Carousel" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-Carousel)
  */
 const Carousel = withWebComponent<CarouselPropTypes, CarouselDomRef>(
   'ui5-carousel',

packages/main/src/webComponents/CheckBox/index.tsx

@@ -100,7 +100,7 @@ export interface CheckBoxPropTypes extends CheckBoxAttributes, Omit<CommonProps,
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-CheckBox" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-CheckBox)
  */
 const CheckBox = withWebComponent<CheckBoxPropTypes, CheckBoxDomRef>(
   'ui5-checkbox',

packages/main/src/webComponents/ColorPalette/index.tsx

@@ -26,7 +26,7 @@ export interface ColorPalettePropTypes extends ColorPaletteAttributes, CommonPro
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ColorPalette" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ColorPalette)
  */
 const ColorPalette = withWebComponent<ColorPalettePropTypes, ColorPaletteDomRef>(
   'ui5-color-palette',

packages/main/src/webComponents/ColorPaletteItem/ColorPaletteItemDescription.md

@@ -1,3 +1,4 @@
-**Since:** 0.14.0
+**Since:** 0.14.0  
+**Abstract UI5 Web Component** - Find out more about abstract components [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-faq--docs#what-are-abstract-ui5-web-components).
 
 The `ColorPaletteItem` component represents a color in the the `ColorPalette`

packages/main/src/webComponents/ColorPaletteItem/index.tsx

@@ -21,9 +21,11 @@ export interface ColorPaletteItemPropTypes extends ColorPaletteItemAttributes, C
 /**
  * The `ColorPaletteItem` component represents a color in the the `ColorPalette`
  *
+ * @abstract
+ *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ColorPalette" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ColorPalette)
  */
 const ColorPaletteItem = withWebComponent<ColorPaletteItemPropTypes, ColorPaletteItemDomRef>(
   'ui5-color-palette-item',

packages/main/src/webComponents/ColorPalettePopover/index.tsx

@@ -56,7 +56,7 @@ export interface ColorPalettePopoverPropTypes extends ColorPalettePopoverAttribu
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ColorPalettePopover" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ColorPalettePopover)
  */
 const ColorPalettePopover = withWebComponent<ColorPalettePopoverPropTypes, ColorPalettePopoverDomRef>(
   'ui5-color-palette-popover',

packages/main/src/webComponents/ColorPicker/index.tsx

@@ -28,7 +28,7 @@ export interface ColorPickerPropTypes extends ColorPickerAttributes, Omit<Common
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ColorPicker" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ColorPicker)
  */
 const ColorPicker = withWebComponent<ColorPickerPropTypes, ColorPickerDomRef>(
   'ui5-color-picker',

packages/main/src/webComponents/ComboBox/index.tsx

@@ -116,7 +116,7 @@ export interface ComboBoxPropTypes extends ComboBoxAttributes, Omit<CommonProps,
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ComboBox" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ComboBox)
  */
 const ComboBox = withWebComponent<ComboBoxPropTypes, ComboBoxDomRef>(
   'ui5-combobox',

packages/main/src/webComponents/ComboBoxGroupItem/ComboBoxGroupItemDescription.md

@@ -1,3 +1,4 @@
-**Since:** 0.18.0
+**Since:** 0.18.0  
+**Abstract UI5 Web Component** - Find out more about abstract components [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-faq--docs#what-are-abstract-ui5-web-components).
 
 The `ComboBoxGroupItem` is type of suggestion item, that can be used to split the `ComboBox` suggestions into groups

packages/main/src/webComponents/ComboBoxGroupItem/index.tsx

@@ -18,9 +18,11 @@ export interface ComboBoxGroupItemPropTypes extends ComboBoxGroupItemAttributes,
 /**
  * The `ComboBoxGroupItem` is type of suggestion item, that can be used to split the `ComboBox` suggestions into groups
  *
+ * @abstract
+ *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ComboBox" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ComboBox)
  */
 const ComboBoxGroupItem = withWebComponent<ComboBoxGroupItemPropTypes, ComboBoxGroupItemDomRef>(
   'ui5-cb-group-item',

packages/main/src/webComponents/ComboBoxItem/ComboBoxItemDescription.md

@@ -1 +1,3 @@
+**Abstract UI5 Web Component** - Find out more about abstract components [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-faq--docs#what-are-abstract-ui5-web-components).
+
 The `ComboBoxItem` represents the item for a `ComboBox`

packages/main/src/webComponents/ComboBoxItem/index.tsx

@@ -22,9 +22,11 @@ export interface ComboBoxItemPropTypes extends ComboBoxItemAttributes, CommonPro
 /**
  * The `ComboBoxItem` represents the item for a `ComboBox`
  *
+ * @abstract
+ *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ComboBox" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-ComboBox)
  */
 const ComboBoxItem = withWebComponent<ComboBoxItemPropTypes, ComboBoxItemDomRef>(
   'ui5-cb-item',

packages/main/src/webComponents/CustomListItem/index.tsx

@@ -64,7 +64,7 @@ export interface CustomListItemPropTypes extends CustomListItemAttributes, Commo
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-List" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-List)
  */
 const CustomListItem = withWebComponent<CustomListItemPropTypes, CustomListItemDomRef>(
   'ui5-li-custom',

packages/main/src/webComponents/DatePicker/index.tsx

@@ -157,7 +157,7 @@ export interface DatePickerPropTypes extends DatePickerAttributes, Omit<CommonPr
  *
  * __Note:__ This component is a web component developed by the UI5 Web Components’ team.
  *
- * <ui5-link href="https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-DatePicker" target="_blank">UI5 Web Components Storybook</ui5-link>
+ * [UI5 Web Components Storybook](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-DatePicker)
  */
 const DatePicker = withWebComponent<DatePickerPropTypes, DatePickerDomRef>(
   'ui5-date-picker',