“shadowRoot.querySelector” not working with lit-element in Web Components

Question

Ok, so I saw some similar problems to mine here but none of the solutions worked for me so I think it's better to describe my problem more specifically.

I'm working with web components and at first I was not using lit element, at that time the this.shadowRoot.querySelector('button') was working just fine, but now that i'm using lit element this selector always returns null, this is my code:

static get styles(){
    return css`
        button{
            color: #737373;
            padding: 15px 30px;
            font-size: 16px;
        }
        .primary{
            border-radius: 25px;
            border: 1px solid;
            color: #4386ff;
            transition: 0.3s;
        }
        .disabled {
            pointer-events: none;
            color: #cacaca;
            background-color: #fff;
        }
    `;
}

static get properties(){
    return{
        type: { type: String },
        text: { type: String},
        fullSize: { type: Boolean},
        disabled: { type: Boolean}
    };
}
constructor() {
    super();
    this.type = "primary";
    this.text = "Seguir";
    this.disabled = false;
    this.fullSize = false;
    this.el = this.shadowRoot.querySelector('button');

    if (this.hasAttribute('disabled'))  {
        this.el.classList.add('disabled');
    }
}

render () {
    return html`
    <button class="${this.type}" 
    ?fullSize="${this.fullSize}"
    ?disabled="${this.disabled}"
    >${this.text}</button>
`;
}

}

That way the this.shadowRoot.querySelector('button') always returns null?! should I use some lifecycle method to make it work? I tried updated but it also didn't work.

My HTML component is like this:

<default-button type="secondary" text="Salvar" fullSize></default-button>

Answer 1

Ok, I read some other stuff about lifecycle and now i understand about the element still beeing built when i first tried to call it, now using the firstUpdated() method it works! Thanks!