Refs The refs property exists for convenience to avoid manually querying the DOM. Since the DOM is only available after rendering, refs will be null until the connectedCallback runs in the lifecycle. const MyElement = customElement(({ connectedCallback, refs }) => { console.log(refs.heading); // null connectedCallback(() => { console.log(refs.heading?.textContent); // hello world }); return html`<h2 ref="heading">hello world</h2>`; });