title: "shadowRoot.querySelector" not working with lit-element in Web Components
body: <p>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.</p>
  <p>I'm working with web components and at first I was not using lit element, at that time the <code>this.shadowRoot.querySelector('button')</code> was working just fine, but now that i'm using lit element this selector always returns null, this is my code:</p>
  <pre><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 = &quot;primary&quot;;
      this.text = &quot;Seguir&quot;;
      this.disabled = false;
      this.fullSize = false;
      this.el = this.shadowRoot.querySelector('button');
  
      if (this.hasAttribute('disabled'))  {
          this.el.classList.add('disabled');
      }
  }
  
  render () {
      return html`
      &lt;button class=&quot;${this.type}&quot; 
      ?fullSize=&quot;${this.fullSize}&quot;
      ?disabled=&quot;${this.disabled}&quot;
      &gt;${this.text}&lt;/button&gt;
  `;
  }
  </code></pre>
  <p>}</p>
  <p>That way the <code>this.shadowRoot.querySelector('button')</code>always returns null!!
  should I use some lifecycle method to make it work? I tried <code>updated</code> but it also didn't work.</p>
  <p>My HTML component is like this:</p>
  <pre><code>&lt;default-button type=&quot;secondary&quot; text=&quot;Salvar&quot; fullSize&gt;&lt;/default-button&gt;
  </code></pre>