Здравствуйте! Многим типам компонентов, таким как вкладки, меню, галереи изображений и другие, требуется какое-то содержимое для отображения.
Так же, как встроенный в браузер тег <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-дерева. Читать далее
