sales@getoncrm.com
+91-7405042484 (Sales Inquiry)
GetOnCRM Solutions
  • Company
    • About
  • Services
    • Salesforce Sales Cloud
    • Salesforce Service Cloud
    • Salesforce Community Cloud
    • Salesforce Lightning
    • Salesforce Pardot
    • Salesforce CPQ
    • Salesforce Appexchange
    • Salesforce Integration
    • Data Management
    • Salesforce Mobile Application
    • Salesforce Commerce Cloud
    • Apttus CPQ
    • Salesforce Einstein
    • Salesforce Marketing Cloud
    • Heroku Cloud Solutions
    • Salesforce Field Service Lightning
  • Case Study
  • Blog
  • Career
  • Contact Us
  • Let’s talk
GetOnCRM Solutions
  • Company
    • About
  • Services
    • Salesforce Sales Cloud
    • Salesforce Service Cloud
    • Salesforce Community Cloud
    • Salesforce Lightning
    • Salesforce Pardot
    • Salesforce CPQ
    • Salesforce Appexchange
    • Salesforce Integration
    • Data Management
    • Salesforce Mobile Application
    • Salesforce Commerce Cloud
    • Apttus CPQ
    • Salesforce Einstein
    • Salesforce Marketing Cloud
    • Heroku Cloud Solutions
    • Salesforce Field Service Lightning
  • Case Study
  • Blog
  • Career
  • Contact Us
  • Let’s talk
GetOnCRM Solutions
  • Company
    • About
  • Services
    • Salesforce Sales Cloud
    • Salesforce Service Cloud
    • Salesforce Community Cloud
    • Salesforce Lightning
    • Salesforce Pardot
    • Salesforce CPQ
    • Salesforce Appexchange
    • Salesforce Integration
    • Data Management
    • Salesforce Mobile Application
    • Salesforce Commerce Cloud
    • Apttus CPQ
    • Salesforce Einstein
    • Salesforce Marketing Cloud
    • Heroku Cloud Solutions
    • Salesforce Field Service Lightning
  • Case Study
  • Blog
  • Career
  • Contact Us
  • Let’s talk
  • Company
    • About
  • Services
    • Salesforce Sales Cloud
    • Salesforce Service Cloud
    • Salesforce Community Cloud
    • Salesforce Lightning
    • Salesforce Pardot
    • Salesforce CPQ
    • Salesforce Appexchange
    • Salesforce Integration
    • Data Management
    • Salesforce Mobile Application
    • Salesforce Commerce Cloud
    • Apttus CPQ
    • Salesforce Einstein
    • Salesforce Marketing Cloud
    • Heroku Cloud Solutions
    • Salesforce Field Service Lightning
  • Case Study
  • Blog
  • Career
  • Contact Us
  • Let’s talk
Blog
Home Salesforce Lightning How to Override CSS of Inner Elements of Lightning Web Component?
Salesforce Lightning

How to Override CSS of Inner Elements of Lightning Web Component?

GetOnCRM Solutions July 24, 2020 0 Comments

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.

Fast Track Your Journey to Lightning Experiece

Fast Track Your Journey to Lightning Experiece

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.

Looking to Hire Salesforce Lightning Experts

Looking to Hire Salesforce Lightning Experts

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.

28
1521 Views
Top Benefits of Salesforce Einstein AI for Enhanced Customer ServicePrevTop Benefits of Salesforce Einstein AI for Enhanced Customer ServiceJuly 17, 2020
Check How to Do Salesforce Customization in Six Easy StepsJuly 30, 2020Check How to Do Salesforce Customization in Six Easy StepsNext

Related Posts

Salesforce Lightning

Top Challenges of Transitioning to Salesforce Lightning and How to Overcome Them

In the present scenario, the demand for the Salesforce Lightning is...

GetOnCRM Solutions August 20, 2020
Salesforce Lightning

Difference Between Salesforce Visualforce Vs. Salesforce Lightning

Both Salesforce Visualforce, as well as the Salesforce Lightning, has some...

GetOnCRM Solutions May 1, 2020

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts
  • Five Key Salesforce Field Service Lightning Features That Drive Efficiency
  • What Are The Advantages Of Using Salesforce Mobile App Solution For Your Healthcare Business
  • Accelerate Transformation Of Sales With Salesforce Sales Cloud
  • The Top 5 Benefits Of Using Salesforce For Fintech Companies
  • The Implementation Of Salesforce Marketing Cloud – A Segmented Approach
Categories
  • Apttus 1
  • Contract Lifecycle Management 1
  • CRM 4
  • Field Service Lightning 3
  • Financial 1
  • Healthcare 1
  • Heroku 1
  • Logistics 2
  • NEWS 2
  • Pharmaceutical 2
  • Sales Cloud 3
  • Salesforce 29
  • Salesforce AppExchange 4
  • Salesforce Commerce Cloud 5
  • Salesforce Community Cloud 4
  • Salesforce CPQ 14
  • Salesforce CRM 12
  • Salesforce Einstein 4
  • Salesforce Integration 14
  • Salesforce Lightning 13
  • Salesforce Marketing Cloud 9
  • Salesforce Mobile App 8
  • Salesforce Pardot 7
  • Service Cloud 4
  • Tableau CRM 1

We are a global Salesforce silver consulting partner that serves a broad mix of businesses, ranging from startups to big corporations. We help our clients make significant and lasting improvements to their performance and realize their most important goals, using Salesforce as a platform to enable digital processes.

   forcetalk-getoncrm-salesforce

  • About
  • Career
  • Services
  • Case Study
  • Blog
  • Contact Us
  • Let’s Talk
GetOnCRM Solutions
INDIA
Ahmedabad: B/706, Ganesh Plaza, Nr. Navrangpura Bus Stand, Navrangpura, Ahmedabad, Gujarat-380009, India.
sales@getoncrm.com
 career@getoncrm.com
sales@getoncrm.com         
career@getoncrm.com
+91-7405042484 (Sales Inquiry)
+91-7016864265 (HR/Career)
sales@getoncrm.com         
career@getoncrm.com
Vadodara: 1008, 10th floor, OCEAN, Nr. Centre Square Mall, Sarabhai Compound, Dr. Vikram Sarabhai Marg, Vadodara, Gujarat, India.
+91-7859895713 (HR/Career)
UK
Address: Brackley Square, Woodford Green, London, IG8.
+44 7877 959 614
USA
Address: 3080 Cowper Street Palo Alto, California 94306, USA
+1 (650) 704-5436
CANADA
Address: 1204 29 Ave NW Edmonton, AB T6T 0K8, Canada
+1 (250) 329-6480

Terms of use | Privacy Environmental Policy

Copyright © 2020 GetonCRM.  All Rights Reserved.

Copyright © 2022 GetOnCRM.  All Rights Reserved. | Our Official United Kingdom Website

Copyright © 2021 GetOnCRM.
All Rights Reserved.
Our Official United Kingdom Website