He creado componentes web simples usando javascript vainilla según el
El problema está en mi hideNonVisibleDivs() quiero acceder a shadowRoot
Aquí están mis funciones.
var visibleDivId = null; var i, divId, div; console.log('shadowroot', this); // display the global shadow root element function divVisibility(divId) { hideNonVisibleDivs.bind(this)(divId); //binding this context } function hideNonVisibleDivs(divId) { //I want to access a shadow root here using this console.log('shadowroot', this); //undefined } var panels = this.shadowRoot.querySelectorAll("#tab-info> .share-tab") panels.forEach(function(el) { divVisibility.bind(this)(this.getAttribute('custom-id')); //bind this context }); });¿Lo que es esperado?
Dentro hideNonVisibleDivs(divId) quiero acceder a shadowRoot como la función externa (the global shadowroot), lo que significa esto.
La solución más simple que puedo ofrecer es dejar de usar this archivo .
El significado de this cambia con cada llamada de función, por lo que tiene problemas para entender a qué se refiere en cualquier punto de su código.
Por ejemplo, su función divVisibility() no puede funcionar.
console.log( 'shadowroot', this ); //{this} is a shadowroot //... function divVisibility(divId) { //shadow root {this} cannot be accessed at all from here hideNonVisibleDivs.bind(this)(divId); //binding this context //^Refers to divVisibility } Intente reescribir su código sin usar this en ninguna parte. En su lugar, utilice un nombre de variable, como 'shadowroot'. (Sin conocer su código, desafortunadamente no sé qué tan útil es este consejo).