Blog Logo

5-Apr-2024 ~ 2 min read

Communication Between Sibling Lit Elements Using Vue3

lit

vue

Table of Contents

1. Introduction

In last post, we explored how to establish communication between sibling Lit elements using native JavaScript events. In this guide, we’ll take a look at how to achieve the same using Vue3 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;
    this.dispatchEvent(
      new CustomEvent('ssc', {
        detail: {
          selectedOption: this.selectedOption,
        },
        bubbles: true,
        composed: true,
      })
    );
  }
}

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. 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>Lit Sibling Communication Using Custom Events Example</title>

    <script type="module" src="./sender-select.js"></script>
    <script type="module" src="./receiver-paragraph.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>

  <body>
    <div id="app">
      <sender-select
        @ssc="(e)=>this.$refs.rr.jobid=e.detail.selectedOption"
        options='["job1", "job2", "job3"]'
      ></sender-select>
      <receiver-paragraph ref="rr"></receiver-paragraph>
    </div>
    <script>
      Vue.createApp({}).mount('#app');
    </script>
  </body>
</html>

5. Conclusion

By using Vue3, we can easily establish communication between sibling Lit elements for dynamic content updates. This approach simplifies the process of managing state and updating content based on user interactions. Vue3’s reactivity system and event handling capabilities make it a powerful tool for building interactive web components.