<script>
customElements.define("my-component", class extends HTMLElement {
  constructor () {
    super();
    this.attachShadow({ mode: "open" }).innerHTML = `
        <div class="card">
            <div class="card-header">
                <slot name="title"></slot>
            </div>
            <div class="card-content">
                <slot name="content"></slot>
            </div>
        </section>
        <style>
            .card { border: 1px solid black; border-radius: 4px;}
            .card-header { padding: 1em; background: #d08a27; color: #fff; font-weight: 700; }
            .card-content { padding: 1em; color: #554c4c; }
        </style>`;
  }
});
</script>

<div>
  <my-component>
    <div slot="title">Card 1</div>
    <div slot="content">Content 1</div>
  </my-component>
</div>

<div style="margin-top: 1em;">
  <my-component>
    <div slot="title">Card 2</div>
    <div slot="content">Content 2</div>
  </my-component>
</div>