I am trying to select a tag from shadow root but not working. So, How to select particular tag from nested shadow root elements?
#shadow-root(open)
<start>
#shadow-root(open)
<plural>
#shadow-root(open)
<main>
#shadow-root(open)
<content>
<p>..text..</p>
</content>
</main>
</plural>
</starts>
Typescript:
let inside = this.shadowRoot.querySelector('content').innerHTML;
console.log(inside);
For an unknown levels of shadowRoot you need to "Walk the DOM" and dive into shadowRoots:
customElements.define("my-component", class extends HTMLElement {
constructor() {
super().attachShadow({mode:"open"}).innerHTML = `<slot></slot>`;
}
})
const shadowDive = (
el,
selector,
match = (el, root) => {
console.warn('match', el, root);
}
) => {
let root = el.shadowRoot || el;
root.querySelector(selector) && match(root.querySelector(selector), root);
[...root.querySelectorAll("*")].map(el => shadowDive(el, selector, match));
}
shadowDive(document.body, "content"); // note optional 2nd, 3rd parameter<my-component>
#shadow-root(open)
<my-component>
#shadow-root(open)
<my-component>
#shadow-root(open)
<content>
<p>..text..</p>
</content>
</my-component>
</my-component>
</my-component>