Ionic 5 — Изменить стиль .range-слайдера в IonRange, который находится под #shadow-root в Safari / iOS

#css #safari #mobile-safari #shadow-dom #ionic5

#css #safari #мобильный-safari #shadow-dom #ionic5

Вопрос:

Мне нужно изменить стиль класса .range-slider, чтобы увеличить область касания, но поскольку он находится под #shadow-root, единственный способ, которым я мог это сделать, — использовать

 const customStyleElement = document.createElement('style');
customStyleElement.innerHTML = `.range-slider {
   height: 200px !important;
   top: 97px;
}`); 
rangeRef.current.shadowRoot.appendChild(customStyleElement);
 

Это отлично работает для Chrome, но не работает в Safari или мобильной iOS.

Пример содержимого Safari Shadow

введите описание изображения здесь

Комментарии:

1. Добро пожаловать в StackOverflow! Работа с теневым Dom иногда может быть очень запутанной. Не могли бы вы добавить скриншот того, как должен выглядеть ion-range в вашем проекте? Таким образом, было бы легче узнать, каков ожидаемый конечный результат, и посмотреть, как этого можно достичь. Спасибо! 🙂