Tengo el siguiente html que represento en un componente iluminado:
render() { return html` <div class="table"> <div id="col"> <p>testing this component</p> </div> </div>`a través del siguiente constructor, estoy llamando a un controlador de cambio de tamaño:
constructor() { super(); window.addEventListener('resize', this._handleResize); }el método handleresize es el siguiente:
private _handleResize = () =>{ var some_id = document.getElementById('col'); var tag = some_id.tagName; ///some_id is coming out as null }Estoy tratando de obtener la etiqueta de identificación 'col' y me arroja nulo. ¿Alguien puede decir cuál es el error aquí?
En lugar de consultar el elemento, debe usar una referencia:
Haciendo referencia al DOM renderizado
import {ref} from 'lit/directives/ref.js'; [...] colRef = createRef(); [...] render() { return html` <div class="table"> <div id="col" ${ref(this.colRef)}> <p>testing this component</p> </div> </div>` } private _handleResize = () =>{ const col = this.colRef.value!; const tag = col.tagName; } También sugiero usar const y let en lugar de var. Además, probablemente debería usar ResizeObserver en lugar de un detector de eventos en la window . Además, no olvide cancelar el registro de sus eventlisteners.