Tengo un componente web muy simple de la siguiente manera que carga un archivo de plantilla de componente desde el servidor:
export default class EditorComponent extends HTMLElement { async connectedCallback() { let file = "http://blog/components/editor/editor.html"; let res = await fetch( file ); this.attachShadow( { mode: 'open' } ).innerHTML = await res.text(); } } customElements.define('editor-component', EditorComponent);Necesito acceder a los elementos secundarios en el archivo HTML del componente a través de jQuery. He intentado lo siguiente pero fue en vano:
async connectedCallback() { let file = "http://blog/components/editor/editor.html"; let res = await fetch( file ); this.attachShadow( { mode: 'open' } ).innerHTML = await res.text(); $(this).find('div').hide(); <<<<< WHAT I AM ATTEMPTING }También he agregado un tiempo de espera, pero eso tampoco ayudó.
Se puede hacer esto?
Tienes que hacer la sintaxis de jQuery tú mismo
Estoy haciendo selectores JS estándar normales aquí
Porque desaprendí los selectores de jQuery (que requieren una biblioteca de más de 80 KB) cuando se lanzó IE9... en 2011
Es un poco contundente cargar HTML, mostrarlo en shadowDOM,
y luego extraiga solo el contenido que desee. Ver h1 continuación
El DOMParser() estándar puede tomar una parte del trabajo, más rápido porque no se renderiza HTML,
ver alink en:
<web-component></web-component> <script> customElements.define("web-component", class extends HTMLElement { async connectedCallback() { let file = "https://load-file.github.io/"; let html = await (await fetch(file)).text(); // Browser engine parses HTML to visual (shadow)DOM this.attachShadow({mode: 'open'}).innerHTML = html; let h1 = this.shadowRoot.querySelector("h1"); // Browser engine parses HTML in Memory let doc = new DOMParser().parseFromString(html, "text/html"); let alink = doc.querySelector("h2 a"); alink.target = "blank" ; this.shadowRoot.replaceChildren(h1, "SHIFT+Click this link: ", alink); } }) </script>Lea sobre todos los métodos en: