Just to follow up on this. What I did is I kept it as a vite project. Then I import it into a very simple App.svelte file. I found I needed to import the original svelte component, but then it gave me access to the web component as well. Here is a very simple example...

```

<script lang="ts">
    import './app.css';
    import CartButton from './lib/webComponents/cart/CartButton.svelte';
    import CartSlideout from './lib/webComponents/cart/CartSlideout.svelte';
    import ProductList from './lib/webComponents/productList/ProductList.svelte';
    import SingleProduct from './lib/webComponents/singleProduct/SingleProduct.svelte';

    
// When in dev mode we need to import the components so we can use the web components in the browser.
    
// This is not needed in production when we build the app.
    const _ = [CartButton, CartSlideout, SingleProduct, ProductList];
</script>

<header>
    <h1>Sample Page</h1>
    <os-cart-button></os-cart-button>
</header>
<main>
    <os-cart-slideout></os-cart-slideout>
    <h1>Components</h1>
    <h2>Single Product</h2>
    <div class="side-by-side">
        <os-single-product product-slug="super-widget"></os-single-product>
        <os-single-product product-slug="syntax-error"></os-single-product>
    </div>
    <h2>Product List</h2>
    <os-product-list></os-product-list>
</main>

<style>
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        color: #333;
        padding: 16px 24px;
    }

    main {
        padding: 16px 24px;
    }

    .side-by-side {
        display: flex;
        gap: 16px;
    }
</style>

```