Для чего нужен глобальный атрибут slot в спецификации HTML?

Question

[test2235]

Не пойму для чего нужен глобальный атрибут slot в спецификации HTML? Что он делает, как работает? https://www.w3.org/TR/dom41/#nodes-shadow-tree-slots

Answer 1

[monochromer]

С помощью slot задают места в шаблоне компонента, которые можно переопределять. Например, есть общий компонент - модальное окно, но нужно управлять количеством кнопок в футере, содержимым в заголовке и в теле. Если знакомы с block в шаблонизаторе Jade/Pug, то это примерно то же самое.

Пример слотов - https://codepen.io/monochromer/pen/jYdewM?editors=1000

Comments

[test2235]

monochromer Правильно ли я понимаю, что атрибутом slot выбираются элементы из для отображения на html странице? Не могли бы пояснить, что в вашем примере означают элемент и атрибут slot, я просто не очень в этом разбираюсь

[monochromer]

В шаблоне компонента template элементами типа <slot name="slot-name"></slot> определяются места куда будет вставляться другая разметка или другие компоненты.

Дальше в примере и идет вставка такого контента. Здесь в атрибуте slot указывается имя слота, в который будет помещаться контент:

<ui-modal>
    <!-- ... -->
    <div slot="modal-body">
      <p>Modal body text goes here.</p>
    </div>
    <!-- ... -->
</ui-modal>

В другом месте я могу создать другой экземпляр компонента с другим содержимым

<ui-modal>
    <!-- ... -->
    <div slot="modal-body">
      <form>
       <input type="text" />
      </form>
    </div>
    <!-- ... -->
</ui-modal>

[test2235]

А вы ничего не путаете, по идее не в template вставляются, а из template?

[monochromer]

Именно так я и написал - в шаблоне template слоты определяются, в других местах - используются.