Мобильная версияЧто лучше всего сделать в веб-компоненте, использующем динамически создаваемый для каждого из его прямых дочерних элементов? (Или ваше предложение, если пока нет четкого ответа)
- Добавьте атрибут слота для каждого дочернего элемента и убедитесь, что слот имеет правильное имя.
- Используйте метод HTMLSlotElement: Assign(), чтобы связать их, не чередуя их.
- Другое?
В настоящее время я практикуюсь с веб-компонентами в личном проекте, но я хочу очистить его, чтобы использовать в своей работе и сделать доступным моему коллеге.
Одним из них является панель навигации: если вы нажмете одну кнопку в заголовке, появится приятная плавная анимация, и вы перейдете к другому контенту. Вот визуальное изображение:
визуальное изображение моего работающего компонента.
Каждый прямой дочерний элемент моего компонента считается вкладкой (или представлением) и размещается в ShadowDOM моего компонента (чтобы лучше контролировать макет, я заключаю каждый слот в контейнер).
Вот мой компонент, используемый в html-документе:
Код: Выделить всё
Tab 1
Tab 2
Tab 3
Вот сгенерированный ShadowDOM из предыдущего использования:
Код: Выделить всё
Test tab 1Test tab 2Test tab 3
Затем мне пришлось добавить MutationObserver, чтобы предотвратить любые изменения в этих «защищенных» атрибутах (с предупреждением консоли). Это работает, но похоже на хак, а не на хороший способ что-то делать.
Я проверил в Интернете решение и нашел HTMLSlotElement.assign() (MDN: https://developer.mozilla.org/en-US/doc ... ent/assign)
Я разговаривал с некоторыми разработчиками, и они категорически отговаривают меня от его использования, заявляя, что «этот подход не является стандартным» или «слоты устроены таким образом».
Я искал, но не смог найти ни одного источника, который бы соответствовал тому, что они говорили. Есть ли какая-то конкретная причина использовать то или иное решение? Есть ли у вас предложения, основанные на вашем опыте?
Подробнее здесь: https://stackoverflow.com/questions/798 ... ent-assign
