Содержимое слота по умолчанию

Бывает полезным указать запасное содержимое слота (т.е. по умолчанию), которое будет отображаться только тогда, когда ничего не передавалось в слот. Например, в компоненте <submit-button>:

<button type="submit">
  <slot></slot>
</button>

Было бы удобно если текст «Отправить» отображался внутри <button> большую часть времени. Чтобы сделать «Отправить» в качестве содержимого по умолчанию, необходимо поместить его между тегами <slot>:

<button type="submit">
  <slot>Отправить</slot>
</button>

Теперь, при использовании <submit-button> в родительском компоненте и не указывая содержимое для слота:

<submit-button></submit-button>

отобразится содержимое по умолчанию — «Отправить»:

<button type="submit">
  Отправить
</button>

Но если указать содержимое:

<submit-button>
  Сохранить
</submit-button>

Тогда оно будет использовано для отображения:

<button type="submit">
  Сохранить
</button>