Menu
Say I have a DOM that looks like this in my Document:
<body>
<div id="outer">
<custom-web-component>
#shadow-root (open)
<div id="inner">Select Me</div>
</custom-web-component>
</div>
</body>
Is it possible to select the inner div inside the shadow root using a single querySelector argument on document? If so, how is it constructed?
For example, something like document.querySelector('custom-web-component > #inner')
803
You can do it like this:
document.querySelector("custom-web-component").shadowRoot.querySelector("#inner")
It cannot be done with a single selector, that capability has been dropped from the web: https://developer.chrome.com/blog/remove-shadow-piercing/
However you can do it by calling querySelector recursively. This can be heavy so use the simplest version possible for your case.
document.querySelector(".your-root-selector")
.shadowRoot.querySelector(".your-shadowed-selector")
This will loop through every element on the page, so it's quite heavy. Use judiciously:
const elements = []
for (const {shadowRoot} of document.querySelectorAll("*")) {
if (shadowRoot) {
elements.push(...shadowRoot.querySelectorAll(".your-shadowed-selector"));
}
}
This runs recursively, use rarely:
const elements = []
function findElements(root) {
for (const {shadowRoot} of root.querySelectorAll("*")) {
if (shadowRoot) {
// Look for elements in the current root
elements.push(...shadowRoot.querySelectorAll(".your-shadowed-selector"));
// Look for more roots in the current root
findElements(shadowRoot);
}
}
}
findElements(document);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
