Communication Between Sibling Lit Elements Using Vue3
Learn how to establish communication between sibling Lit elements using Vue3 for dynamic content updates based on user selections.
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.