Blog Logo

5-Apr-2024 ~ 2 min read

Communication Between Sibling Lit Elements Using parent Lit element

lit

Table of Contents

1. Introduction

In last post, we explored how to establish communication between sibling Lit elements using Vue3. In this guide, we’ll take a look at how to achieve the same using parent Lit element for dynamic content updates based on user selections.

2. Creating the Sender Element (sender-select.js)

// sender-select.js
import {
  LitElement,
  css,
  html,
} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';

class SenderSelect extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
  `;

  static properties = {
    options: { type: Array },
    selectedOption: { type: String },
  };

  constructor() {
    super();
    this.options = [];
    this.selectedOption = '';
  }

  render() {
    return html`
      <select @change=${this.handleChange}>
        ${this.options.map(
          option => html`<option value=${option}>${option}</option>`
        )}
      </select>
    `;
  }

  handleChange(event) {
    this.selectedOption = event.target.value;
    console.log('Selected Option:', this.selectedOption);
    this.dispatchEvent(
      new CustomEvent('sender-select-changed', {
        detail: {
          selectedOption: this.selectedOption,
        },
      })
    );
  }
}

customElements.define('sender-select', SenderSelect);

3. Creating the Receiver Element (receiver-paragraph.js)

// receiver-paragraph.js
import {
  LitElement,
  css,
  html,
} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';

class ReceiverParagraph extends LitElement {
  static properties = {
    jobid: { type: String },
  };

  render() {
    return html`<div>Long Job with Job ID: ${this.jobid}</div>`;
  }
}

customElements.define('receiver-paragraph', ReceiverParagraph);

4. Creating the Parent Element (parent-component.js)

import {
  LitElement,
  css,
  html,
} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';

class ParentComponent extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
  `;

  static properties = {
    senderOptions: { type: Array },
    selectedSender: { type: String },
  };

  constructor() {
    super();
    this.senderOptions = [];
    this.selectedSender = '';
  }

  handleSenderChange(event) {
    this.selectedSender = event.detail.selectedOption;
  }

  render() {
    return html`
      <sender-select
        .options=${this.senderOptions}
        @sender-select-changed=${this.handleSenderChange}
      ></sender-select>
      <receiver-paragraph .jobid=${this.selectedSender}></receiver-paragraph>
    `;
  }
}

customElements.define('parent-component', ParentComponent);

5. Testing (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Parent Component Example</title>
  </head>

  <body>
    <h2>Test2</h2>
    <parent-component
      senderOptions='["job1", "job2", "job3"]'
    ></parent-component>
    <script type="module">
      import './parent-component.js';
      import './sender-select.js';
      import './receiver-paragraph.js';
    </script>
  </body>
</html>

5. Conclusion

In this guide, we learned how to establish communication between sibling Lit elements using a parent Lit element. This approach allows us to manage the state and communication between the sender and receiver elements effectively. By using custom events and properties, we can create dynamic content updates based on user selections, providing a seamless user experience.