Скрыть div внутри (например, Twitter) shadow-dom с помощью JavaScript
Использование TamperMonkey для упрощения просмотра страниц на моей стороне и желание скрыть от печати часть внешних карточек Twitter. Изображение во встроенном твите в любом случае не печатается и оставляет большой пустой прямоугольник, занимающий ценное пространство.
Модель DOM выглядит, как на изображении ниже - как мне настроить таргетинг на DIV с классом SummaryCard-image (зеленая стрелка)? Для меня не имеет значения, удален ли DIV из DOM или просто скрыт с помощью CSS.
Я пробовал следующие методы, которые не работают:
(1) Внедрение CSS с помощью .SummaryCard-image{display:none !important;}
(2) jQuery: $('.SummaryCard-image').remove();
$('.SummaryCard-image').length возвращает 0
(Note the
#shadow-root (open), 2nd element from the top)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно сначала выбрать теневой корень, чтобы перейти к этому элементу. Вам нужно что-то вроде этого
var twitterWidget= document.querySelector('twitterwidget').shadowRoot;
twitterWidget.querySelector('.SummaryCard-image').style.display = "none";
Для нескольких виджетов Twitter
var twitterWidgets = document.querySelectorAll('twitterwidget');
twitterWidgets.forEach(function(item){
var root = item.shadowRoot; root.querySelector('.SummaryCard-image').style.display = 'none';
})
Пример https://rawgit.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/raw/fancy-tabs-demo.html
var tabs= document.querySelector('fancy-tabs').shadowRoot
tabs.querySelector('#tabs').style.display = none
querySelectorAll возвращает список узлов. вам нужно повторить его.
Без проблем. :-)
Работает как босс - спасибо, Картик. Для будущих гуглеров: для Twitter, необходимо было также добавить отдельный цикл forEach, чтобы также захватывать root.querySelector('article').style.display = 'none';
Тогда вам нужно использовать querySelectorAll.