The Big Picture (Start Here) ⚡ 1-Minute Summary • An agent understands language, decides what to do, and acts. A chatbot only answers. • Every example in this notebook uses one company: Meridian Power. Same company, every module. • Learn the 360 Card first (0.5). It is the shape of every good answer: rule, gain, price, limits. Module map MODULE 0 root: 'What is Agentforce, and how do the modules fit together?' ├─ 0.1 The map: one agent, six layers ├─ 0.2 Meridian Power — the example company ├─ 0.3 Key terms in plain words ├─ 0.4 The rename map (2024-2026) └─ 0.5 The 360 Card — how to answer any question 0.1 The Map: One Agent, Six Layers 💬 In plain words: Agentforce looks like many products. It is not. It is one agent with six layers stacked under it. Each layer answers one question, and each module of this notebook lives on one layer. 📌 Example: A customer types "my power is out." Identity decides whose dat...
Introduction:
In Salesforce Lightning Web Components (LWC), the mixed shadow mode allows you to leverage the benefits of both the Shadow DOM and the Light DOM. It enables you to encapsulate your component's styles and prevent CSS clashes while still maintaining the flexibility to interact with elements outside the component's boundary. In this blog post, we will explore the concept of mixed shadow mode in LWC and provide you with a step-by-step guide on how to build components using this mode. Additionally, we will include example code snippets to help you grasp the implementation process more effectively.
Table of Contents:
1. What is Mixed Shadow Mode?
2. Advantages of Mixed Shadow Mode
3. Building Components in Mixed Shadow Mode
a. Enabling Mixed Shadow Mode
b. Styling in Mixed Shadow Mode
c. Interaction with Elements Outside the Component
4. Example Code: Building a Custom Button Component
a. HTML Markup
b. CSS Styling
c. JavaScript Implementation
d. Testing the Custom Button Component
5. Conclusion
1. What is Mixed Shadow Mode?
The mixed shadow mode in LWC allows you to combine the benefits of both the Shadow DOM and the Light DOM. It provides the ability to encapsulate the component's styles and prevent style clashes with the external environment while still allowing interaction with elements outside the component's boundary.
2. Advantages of Mixed Shadow Mode:
- Encapsulation: Mixed shadow mode enables encapsulation of styles within the component, preventing CSS clashes with external stylesheets.
- Component Flexibility: With mixed shadow mode, you can still interact with elements outside the component's boundary, which offers more flexibility in building complex UI interactions.
- Improved Style Isolation: Styles defined within the component are encapsulated and do not interfere with the external environment. This helps maintain consistency and avoids unintended style modifications.
3. Building Components in Mixed Shadow Mode:
a. Enabling Mixed Shadow Mode:
To enable mixed shadow mode in your LWC component, add the @api decorator to the renderMode property in the JavaScript file:
@api renderMode = 'mixed';
b. Styling in Mixed Shadow Mode:
You can define styles within your component using CSS. These styles will be encapsulated within the component's shadow boundary, preventing conflicts with external stylesheets. Here's an example of how you can define styles for a custom button component:
:host {
display: inline-block;
padding: 8px 16px;
background-color: #0070d2;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
:host(.disabled) {
background-color: #ccc;
cursor: not-allowed;
}
c. Interaction with Elements Outside the Component:
To interact with elements outside the component's boundary, you can make use of the lightning/ui* APIs provided by Salesforce. These APIs allow you to access and manipulate elements in the Light DOM. For example, you can use the getElementsByClassName method to access an element with a specific class name:
import { LightningElement, api } from 'lwc';
import { getElementsByClassName } from 'lightning/uiUtils';
export default class MyComponent extends LightningElement {
@api elementClassName;
handleClick() {
const elements = getElementsByClassName(this.elementClassName);
// Perform actions on the retrieved elements
}
}
4. Example Code: Building a Custom Button Component:
Let's build a custom button component using mixed shadow mode to demonstrate the concepts discussed above.
<template>
<div class="custom-button">
<button class="button" onclick={handleClick}>{label}</button>
</div>
</template>
b. CSS Styling:
.custom-button {
display: inline-block;
}
.button {
padding: 8px 16px;
background-color: #0070d2;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.button.disabled {
background-color: #ccc;
cursor: not-allowed;
}
c. JavaScript Implementation:
import { LightningElement, api } from 'lwc';
export default class CustomButton extends LightningElement {
@api label;
@api disabled;
handleClick() {
if (!this.disabled) {
// Perform actions on button click
}
}
}
d. Testing the Custom Button Component:
<template>
<c-custom-button label="Click Me" disabled={false}></c-custom-button>
</template>
5. Conclusion:
In this blog post, we explored the concept of mixed shadow mode in Salesforce Lightning Web Components (LWC). We discussed the advantages of using mixed shadow mode and provided a step-by-step guide on building components in this mode. Additionally, we provided an example of building a custom button component to illustrate the implementation process. By leveraging mixed shadow mode, you can achieve better style encapsulation while still maintaining flexibility in interacting with elements outside the component.