Difference between connectedCallback() and renderedCallback() in LWC

When the shadow dom is connected to the main document, at that moment a JavaScript method called connectedCallback() is invoked.

By the time this method gets invoked, we cannot write code that is trying to get reference to the tags, because the template is not yet loaded, it’s just connected to the main dom.

Likewise, when the shadow dom is completely rendered then the JavaScript method renderedCallback() is invoked. In this method, we can write code to get a references to the HTML and Custom Component tags.

Hope this was helpful!