HTML таг `slot` редактор на живо

HTML код:

<template id="user-card-template">
  <style>
    .card {
      border: 1px solid #ddd;
      border-radius: .5rem;
      padding: 1rem;
      max-width: 260px;
      font-family: system-ui, sans-serif;
    }
    .name {
      font-weight: 600;
      margin-bottom: .25rem;
    }
    .role {
      color: #6c757d;
      font-size: .9rem;
    }
  </style>
  <div class="card">
    <div class="name"><slot name="name">Име по подразбиране</slot></div>
    <div class="role"><slot name="role">Роля по подразбиране</slot></div>
    <div class="extra">
      <slot>Допълнителна информация по подразбиране</slot>
    </div>
  </div>
</template>

<user-card>
  <span slot="name">Иван Петров</span>
  <span slot="role">Frontend разработчик</span>
  <p>Работи с HTML, CSS, JavaScript и Web Components.</p>
</user-card>

Резултат:

HTML таг slot редактор на живо

HTML таг `slot` редактор на живо