Scoped styling?

[Gildedter]

I have multiple instances on my route, a main one, and a wrapped version, the wrapped version has a different look, but the styles of the main version is being overwritten by the wrapped version, I'm using this for targeting:

/// main version
<style lang="postcss">
  :global([data-svelte-search] label) {
    @apply hidden;
  }
  :global([data-svelte-search] input) {
    @apply rounded-none rounded-r-lg bg-none;
  }
  :global([data-svelte-search] form) {
    @apply rounded-none rounded-r-lg;
  }
  :global([data-svelte-typeahead]) {
    @apply bg-none rounded-none rounded-r-lg;
  }
  select {
    @apply rounded-none rounded-l-lg w-fit pr-8;
  }
</style>

/// scoped version
<style lang="postcss">
  :global([data-svelte-search] label) {
    @apply hidden;
  }
  :global([data-svelte-search] input) {
    @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
  }
  :global([data-svelte-search] form) {
    @apply rounded-lg;
  }
  :global([data-svelte-typeahead]) {
    @apply bg-none rounded;
  }
</style>

[metonym]

$$restProps is spread to the Search component, so you can pass a unique attribute to only style the targeted element:

<Typeahead data-search-id="1" />

<style>
  :global([data-search-id="1"]) {
    /* ... */
  }
</style>

[Gildedter]

Didn't work for me, I just stuck with one style...