Search code examples
javascriptlit-element

How to query children of Lit-element shadow root using tag name


Is there is a way to get a child lit-element (by its name) in the host? I only know how to access them using id and this.shadowRoot.getElementById()

import { LitElement, html } from 'lit-element';
import './child-element.js';

class ParentElement extends LitElement {
  render() {
    return html`<child-element someattribute="somevalue"></child-element>`;
  }
}

Solution

  • Turns out it was simply calling shadowRoot.querySelector("element-name"):

    ...
    class ParentElement extends LitElement {
      render() {
        return html`<child-element someattribute="somevalue"></child-element>`;
      }
      aMethod() {
        let childElement = this.shadowRoot.querySelector("child-element");
      }
    }
    ...