Как достать нужную информацию с querySelector из shadowRoot(open) Tampermonkey?

Question

[Арсений Азизов]

Столкнулся с такой проблемой: никак не могу достать информацию из shadowroot(open), перепробовал много способов никак не получается.

html:

мои попытки:

var text = document.querySelectorAll("csfloat-item-row-wrapper div.float-row-wrapper csfloat-float-bar")[0].shadowRoot.getAttribute("float");
console.log(text);

или

var text = document.querySelectorAll("csfloat-item-row-wrapper div.float-row-wrapper span")[0].textContent; console.log(text);

помогите

Answer 1

[Денис Михайлюк]

Shadow DOM (aka Shadow Root) - это отдельное DOM дерево, изолированное от основного, соответственно получить его элементы через запрос к document нельзя, нужно сначала получить сам Shadow Root.

В вашем случае:

var shadow = document.querySelector('csfloat-item-row-wrapper').shadowRoot;

И только теперь, можно получить элементы внутри, обратившись к переменной shadow:

var text = shadow.querySelector('div.float-row-wrapper csfloat-float-bar').getAttribute('float');

Почитать про Shadow DOM подробнее можете здесь, все нюансы кратко и доходчиво