JSFiddle - React, Tailwind, and code Playground

HTML

<template id="card-template">
  <style>
  ::slotted(*) {
    display: none
  }
  /* unfortunately this isn't able to have a variable instead of '2' */
  ::slotted(:nth-child(2)) {
    display: initial;
  }
  </style>
  <div>
    <slot></slot>
  </div>
</template>

<my-card>
  <!-- unfortunately this overrides ::slotted -->
  <span style="display: block">first</span>
  <span>second</span>
  <span>third</span>
</my-card>

JavaScript

customElements.define(
  'my-card',
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('card-template');
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.appendChild(template.content.cloneNode(true));
    }
  },
);