Работа с Shadow DOM

Shadow DOM — это технология, позволяющая создавать изолированные DOM-деревья внутри элементов. Cash предоставляет удобные методы для работы с Shadow DOM, облегчая манипуляцию и доступ к его содержимому, сохраняя при этом компактность кода и совместимость с другими функциями библиотеки.

Создание Shadow Root

Для создания Shadow DOM используется метод shadow():

const host = $('#host-element');
const shadowRoot = host.shadow({ mode: 'open' });

Параметры метода:

  • mode: может быть 'open' или 'closed'.

    • 'open' — Shadow DOM доступен извне через свойство shadowRoot.
    • 'closed' — доступ извне невозможен, элемент полностью изолирован.

Метод возвращает объект ShadowRoot, с которым можно работать как с обычным DOM.

Добавление элементов в Shadow DOM

После создания Shadow Root можно добавлять в него элементы при помощи методов Cash:

const shadowRoot = $('#host-element').shadow({ mode: 'open' });

$(shadowRoot)
  .append('
Пример текста в Shadow DOM
')
  .append('');

Методы append, prepend, html работают так же, как с обычным DOM, но применяются к изолированному дереву Shadow DOM.

Стилизация элементов Shadow DOM

Shadow DOM позволяет инкапсулировать стили, чтобы они не влияли на остальную страницу и наоборот. Для добавления стилей используется `);

Все стили, добавленные внутрь Shadow DOM, применяются только к его элементам, что обеспечивает полную изоляцию.

Доступ к элементам внутри Shadow DOM

Cash поддерживает селекторы для поиска элементов внутри Shadow DOM через метод find:

const btn = $(shadowRoot).find('.btn');
btn.on('click', () => {
  alert('Кнопка в Shadow DOM нажата!');
});

Методы find, children, closest работают так же, как и в обычном DOM, но ограничены границами Shadow Root, если поиск выполняется внутри него.

Работа с событиями

События в Shadow DOM могут всплывать наружу при composed: true. Cash упрощает работу с событиями:

$(shadowRoot)
  .find('.btn')
  .on('click', (event) => {
    console.log(event.target.textContent);
  });

Особенности:

  • Внутри Shadow DOM можно использовать обычные методы Cash для навешивания событий.
  • Для элементов в закрытом Shadow DOM (mode: 'closed') события можно обрабатывать только внутри Shadow Root.

Динамическое обновление Shadow DOM

Элементы и стили Shadow DOM можно изменять динамически, используя стандартные методы Cash:

const shadowRoot = $('#host-element').shadow({ mode: 'open' });

const paragraph = $(shadowRoot).find('p');
paragraph.text('Новый текст в Shadow DOM');

paragraph.css({
  color: 'green',
  fontSize: '18px'
});

Методы text, html, css работают аналогично обычным DOM-элементам, что упрощает манипуляции и позволяет строить динамические компоненты.

Инкапсуляция и взаимодействие с внешним DOM

Shadow DOM обеспечивает полную изоляцию:

  • Внешние стили не применяются к элементам внутри Shadow Root.
  • События всплывают наружу только при composed: true.
  • Элементы внутри закрытого Shadow DOM полностью скрыты от внешнего кода.

Для взаимодействия с внешним DOM рекомендуется использовать методы Cash для событий или явное добавление ссылок на элементы.

Использование шаблонов и клонирование

Для удобства создания повторяющихся компонентов можно использовать