Отправляет email-рассылки с помощью сервиса Sendsay

Как создать сайт

  Все выпуски  

Как создать сайт


Слоты теневого DOM и композиция

Здравствуйте! Многим типам компонентов, таким как вкладки, меню, галереи изображений и другие, требуется какое-то содержимое для отображения.

Так же, как встроенный в браузер тег  <select> ожидает получить контент пунктов <option>, компонент <custom-tabs> может ожидать, что будет передано фактическое содержимое вкладок, а <custom-menu> – пунктов меню.

Код, использующий меню <custom-menu>, может выглядеть примерно  так:

<custom-menu>
  <title>Сладости</title>
  <item>Леденцы</item>
  <item>Фруктовые тосты</item>
  <item>Кексы</item>
</custom-menu>

Затем компонент должен правильно его отобразить – как обычное меню с заданным названием и пунктами, обрабатывать события меню и т.д.

Как же это реализовать?

Можно попробовать проанализировать содержимое элемента и динамически скопировать и переставить DOM-узлы. Это возможно, но если мы будем перемещать элементы в теневой DOM, CSS-стили документа не будут применяться, и мы потеряем визуальное оформление. Кроме того, нужно будет писать дополнительный код.

К счастью, нам этого делать не нужно. Теневой DOM поддерживает элементы  типа <slot>, которые автоматически наполняются контентом из обычного, «светлого» DOM-дерева.  Читать  далее

Слоты ShadowDOM


В избранное