Использование сторонних скриптов в теневом DOM - PullRequest
Новая
       31

Использование сторонних скриптов в теневом DOM

0 голосов
/ 06 июня 2018

Я занимаюсь разработкой пользовательских элементов для базовых элементов многократного использования (например, кнопок, меню, таблиц данных и т. Д.). Мне известно о поддержке браузером пользовательских элементов и теневых DOM, но я хорошо справляюсь свообще доступные полифиллы.

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

Это происходит каждый раз, когда внешний скрипт хочет найти элемент по классу или идентификатору.Очевидно, что вызов 

document.getElementById (id)

или 

document.getElementsByClassName (class)

не работает, потому что элемент с идентификатором или классом не может быть найден в глобальном DOM, но в теневом DOM.

Насколько я знаю, вы не можете дать переменной документа новую ссылку в javascript.

Итак, есть ли решение этой проблемы, не разбирая весь сценарий и не переписывая его, чтобы он стал пригодным для использования вконтекст DOM тени?

РЕДАКТИРОВАТЬ: Дело не в том, чтобы получать элементы из теневых DOM в целом, а в том, как можно использовать сторонние скрипты, которые не знают, что им нужно искать в теневом DOM, из которого они вызваны, а не в основном.DOM.Как указано в комментариях CBroe.

1 Ответ

0 голосов
/ 06 июня 2018

Обходной путь - извлечь элемент, необходимый сторонней библиотеке для извлечения из Shadow DOM. 

<your-element>
  <div id="visible-id" class="visible-class"></div>
</your-element>

и вставить его в Shadow DOM, используя элемент <slot>.

Примечание: Я использовал прямой пример HTML, но вы можете вставить вызываемый элемент по сценарию при создании вашего пользовательского элемента: 

connectedCallback () {
    this.innerHTML = '<div id="visible-id"></div>'
}

OfКонечно, его нет в Shadow DOM, но он будет работать с большинством сторонних библиотек.

Вы также можете вообще не использовать Shadow DOM в зависимости от ваших потребностей.

...