docs: adds dist-custom-elements target to docs.

src/docs/pages/introduction/getting-started/index.md

@@ -50,49 +50,19 @@ import { defineCustomElements } from '@emdgroup-liquid/liquid/dist/loader'
 defineCustomElements()
 ```
 
-<!-- TODO: dist-custom-elements seems to be pretty tricky at the moment and I first need to clarify the usage and caveats to be able to document it properly. -->
-<!-- #### dist-custom-elements
+#### Avoid lazy loading
 
-If your application uses a bundler (e.g. vite, webpack) and does not benefit from lazy loading, you can improve your runtime performance by importing the components from `@emdgroup-liquid/liquid/dist/components/` individually. For additional context please have a look at [dist-custom-elements](https://stenciljs.com/docs/custom-elements) in the Stencil docs.
+If your project requires immediate loading of components, you can use Liquid Oxygen Web Components imported from `@emdgroup-liquid/liquid/dist/components/*`. These components are loaded and automatically registered when imported. This behavior is particularly useful when you are using a bundler like [Vite](https://vitejs.dev/) or [Webpack](https://webpack.js.org/). 
 
-As you must add every component individually, we recommend to create a file which registers all components at once. This file can then be imported in your `App.tsx` file.
-
-```tsx
-// App.tsx
-import { LdButton } from '@emdgroup-liquid/liquid/dist/components/ld-button'
-
-customElements.define('ld-button', LdButton)
-``` -->
-
-<!-- ## Import and register Web Components
-
-There are multiple options to choose from when importing and registering Liquid Web Components:
-
-### self-lazy-loading bundle
-
-The [self-lazy-loading bundle](https://stenciljs.com/docs/distribution) is a tree shakable bundle, which includes all Liquid components as well as polyfills. You just import it once, then it automatically loads components lazily whenever they are used in your app.
+Import the Web Component individually whenever you use it in your application.
 
 ```js
-import { defineCustomElements } from '@emdgroup-liquid/liquid/dist/loader'
-
-defineCustomElements()
+//main.ts
+import "@emdgroup-liquid/liquid/dist/components/ld-button"
+import "@emdgroup-liquid/liquid/dist/components/ld-icon"
 ```
 
-### dist-custom-elements
-
-The [dist-custom-elements](https://stenciljs.com/docs/custom-elements) output target is used to generate custom elements in a more optimized way for tree shaking. The generated output consists of ES Modules which helps bundlers to parse and optimize the code.
-
-```js
-import { LdButton } from '@emdgroup-liquid/liquid/dist/components/ld-button'
-
-customElements.define('ld-button', LdButton)
-```
-
-<ld-notice mode="warning">
-  Please be aware that when using <a href="guides/react-bindings/">React bindings</a> you must use the <a href="introduction/getting-started/#self-lazy-loading-bundle">self-lazy-loading bundle</a>.
-</ld-notice>
-
-Learn more about the differences in the [Stencil docs](https://stenciljs.com/docs/output-targets). -->
+<!-- Learn more about the differences in the [Stencil docs](https://stenciljs.com/docs/output-targets). -->
 
 ### Import stylesheets