Estoy tratando de seleccionar una etiqueta de shadow root pero no funciona. Entonces, ¿cómo seleccionar una etiqueta particular de los elementos raíz de la sombra anidados?
#shadow-root(open) <start> #shadow-root(open) <plural> #shadow-root(open) <main> #shadow-root(open) <content> <p>..text..</p> </content> </main> </plural> </starts>Mecanografiado:
let inside = this.shadowRoot.querySelector('content').innerHTML; console.log(inside);Para niveles desconocidos de shadowRoot necesitas "Walk the DOM" y sumergirte en 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>