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