<style> slot doesn't get replaced

[nemanjam]

I can't replace <slot name="astro-social-share-css"> slot, can only override styles with important, default styles persist always. If you add some content within <slot name="astro-social-share-css"> slot you will see it persists even when you pass a slot with that name.

<SocialShare {...props} {buttons}>
  <style is:global slot="astro-social-share-css">
    .astro-social-share {
      @apply inline-block h-10 space-x-8;
    }

    .social-share-btn {
      @apply inline-block !mr-0;

      svg {
        @apply inline-block w-10 h-10;
      }

      &:hover {
        filter: brightness(70%);
      }
    }

    /* facebook */
    .social-share-btn:nth-child(1) {
      fill: #1877f2;
    }

    /* twitter */
    .social-share-btn:nth-child(2) {
      fill: #000000;

      /* must target path */
      &:hover path {
        @apply fill-gray-400;
      }
    }

    /* reddit */
    .social-share-btn:nth-child(3) {
      fill: #ff4500;
    }

    /* linkedin */
    .social-share-btn:nth-child(4) {
      fill: #0a66c2;
    }

    /* hackernews */
    .social-share-btn:nth-child(5) {
      fill: #f0652f;
    }
  </style>
</SocialShare>

I added <h1> within slot in node_modules:

And it's rendered, not replaced: