What is Lightning Web Component?
Lightning web components are custom HTML built using HTML and modern JavaScript. Lightning web components use core web components standards and provide only what’s necessary to perform well in browsers supported by Salesforce. Because it is built on code that runs natively in browsers, Lightning web components are lightweight and delivers exceptional performance.
Generally we face difficulty in overriding inner elements of lightning web components. So here let’s see how we could do that.
Let’s take an example of lightning-input. It represents interactive controls that accept user input depending on the type attribute.
Date Input: Date input fields provide a date picker for entering a date.
Below example shows lightning-input type “date”
Fig. 1(a)
Scenario:
We are required to reduce the size of this calendar/datepicker which you can see in the above image.
Implementation:
- Lightningdatepicker.html (Lightning Web Component Template)
- It contains lightning-input of type “date”.
- Lightningdatepicker.css (Lightning Web Component CSS File)
- It contains css for lightning datepicker/calendar to reduce its size
The Output :
As we can see the above output is the same as original output i.e Fig. 1(a) . Even after applying css to slds-datepicker(lightning datepicker). This is due to datepicker not being accessible/visible to our component’s css because of the strict CSS isolation enforced by LWC. As in lightningelement.html we are not able to see any element such as datepicker because it is embedded inside <lightning-input></lightning-input> that acts as a wrapper for datepicker.
So to resolve this issue we need to put CSS that we wanted applied to the inner shadow DOM of Salesforce Base Components in a static resource. Then we used the loadStyle method of lightning/platformResourceLoader module to load that css.
- js (Lightning Web Component Js File)
- It contains the loadStyle method of lightning/platformResourceLoader module to load css. In this customMinifiedDp is a static resource which contains css file “customMinifiedDP.css”.
- css (Static Resource Css File)
The above CSS loaded through the loadStyle does allow overriding the inner elements while the CSS coming from the .CSS of the lightning bundle doesn’t allow this.Output After Uploading Static Resource:
It shows the reduced size of the datepicker/calendar by overriding the inner elements of the lightning web component.
If you are thinking about building your app on the AppExchange, Contact us. At GetOnCRM Solutions, Our team of highly experienced Salesforce Lightning Experts can help you to customize and build beautiful apps and future for your platform on your unique business needs.
Frequently Asked Questions on Overriding CSS in Lightning Web Components
Can you override CSS in Salesforce Lightning Web Components?
Yes, you can override CSS, but it requires scoped styling or using SLDS utility classes. Standard CSS inheritance does not work directly because LWC applies a shadow DOM for encapsulation.
Why is CSS overriding in LWC difficult compared to standard web apps?
Unlike regular web apps, LWC uses a shadow DOM that isolates styles. This prevents unintended overrides but also makes it harder to apply external CSS without proper techniques.
Can global CSS be applied in Lightning Web Components?
Global CSS cannot directly override LWC styles due to encapsulation. Instead, developers must use shared stylesheets or SLDS utility classes for consistent design across components.
How do developers handle third-party CSS in LWC?
Third-party CSS should be scoped through static resources. This way, the CSS is imported into the component safely without affecting Salesforce’s built-in design system.
