Доступ к пользовательским элементам и управление ими из другого js-файла

#javascript #dom #shadow-dom

#javascript #dom #shadow-dom

Вопрос:

У меня есть пользовательские элементы с теневой корневой инкапсуляцией, которые отображаются в div на веб-странице. Я хочу иметь возможность сделать соответствующий div отзывчивым, изменив некоторые атрибуты пользовательских элементов (CE), отображаемых в них, такие как текст, отображаемый в них, и некоторые свойства CSS. Обратите внимание, отображаемый текст и некоторые другие базовые свойства CSS для CE заключены в его конструктор.

Основная цель отзывчивости заключается в том, что CE’ы находятся на боковой панели (например, на панели навигации), и я пытаюсь сделать боковую панель сворачиваемой нажатием кнопки, поэтому пользовательские элементы, заключенные в нее, должны реагировать на это. Итак, когда я нажимаю кнопку, я хочу иметь возможность управлять пользовательскими элементами, заключенными в боковой панели (например, текст и CSS).

Я могу манипулировать текстом и CSS, находясь в соответствующем файле JS пользовательского элемента, но на самом деле я хочу иметь возможность делать то же самое извне, то есть из другого файла JS (моего основного файла JS). Возможно ли это, и если да, не могли бы вы показать мне, как я мог бы это сделать? Также просто обратите внимание, что я работаю только с ванильным JS.

Если это невозможно, то как я могу заставить пользовательские элементы реагировать на эту ситуацию из их соответствующих файлов?

Заранее спасибо.

Ответ №1:

document.getElementById(‘элемент’).addClass(‘скрытый’); // изменить класс document.getElementById(‘элемент’).removeClass(‘скрытый’);

document.getElementById(‘элемент’).attr(‘скрытый’,false); // изменить атрибут