Styling and Data Binding in Lightning Web Component

3. FREE WEEKLY LWC SESSION
TIMINGS Sunday
 8PM IST
 10:30AM EST
 7:30 AM PST

5. Agenda
Cascading Style Sheets (CSS)
Salesforce Lightning Design System(SLDS)

6. CSS and SLDS in LWC
 To style the LWC use Lightning Design System(SLDS) or CSS

SLDS CSS
Use to give your component the Lightning
experience look and feel
Use to modify styling our own way
It helps you build applications with the look
and feel of Lightning Experience without
writing a single line of CSS
It describes how HTML elements are to be
displayed on screen, paper, or in other media.

7. Style LWC Components with SLDS
 SLDS is a CSS framework that provide look and feel of Lightning experience
 It’s easy to spot the SLDS styles because they begin with SLDS
 Example : We will create a button with a “brand” design variation.
 Use the “variant” attribute to pick the design variations

8. Custom CSS
 To style a component, create a style sheet in the component bundle with the same
name as the component
LWC Component CSS File
MyComponent MyComponent.css

9. CSS in LWC
 Each component can have only one style sheet.
 A component’s style sheet can reach up and style its own
element
Demo

11. Agenda
 What is SVG
 Difference between SVG and JPEG/PNG
 Ways to Use SVG in LWC

12. What is SVG?
 Scalable Vector Graphics (SVG) is a web standard that allows you to
define two-dimensional vector graphics using an XML-based markup
language.
 Lightning Web Components (LWC) provide full built-in support for using
them Example
<svg baseProfile="full" width="300" height="200"
xmlns=http://www.w3.org/2000/svg>
<rect width = “100%” height =“100%” fill=“red”></rect>
</svg>
XML format

13. Why SVG is better?
Pixel SVG
Pixel-based images (also known as raster or bitmap
images
Scalable Vector Graphics (SVG)
Pixel define a color for each individual pixel of the
image.
SVG defines how to create scalable vector-based
graphics using XML code
They’re difficult to scale or change. SVGs are well suited for web development, as XML
plays nicely with HTML, JavaScript and CSS.
Some examples of pixel-based image formats are
JPEG, GIF, PNG, TIF, BMP or PSD.
Some vector-based image formats include AI, CDR or
SVG.
SVG images don’t lose quality when you scale them,
can be easily created and modified, and they don’t
require too much space on disk.

14. Pixel vs. vector-based
graphics
Pixel Image SVG vs Pixel(PNG)

15. Ways to use SVG
There are 3 ways to use SVG in LWC
 Use the SVG inside an HTML template
 Create a dedicated component for loading your
SVGs
 Store the SVG in a static resource


17. Agenda
 What is data binding
 One-Way Data Binding in LWC Vs Aura
 Two-Way Data Binding in LWC Vs Aura
 Track Decorator not used anymore

18. Data Binding
 Data binding is the synchronization of data between
business logic and view of the application. There are two
types of data-binding
 There are 2 types of Data Binding
 One-way Binding
 Two-way binding

19. One-way vs Two-way data Binding

20. One-Way data Binding in LWC Vs Aura

22. Two-way data Binding in LWC vs Aura

23. Track Decorator deprecated
 Earlier track decorator was used to make property
reactive but now all fields in a Lightning web
component class are reactive.
 If a field’s value changes, and the field is used in
a template, the component re-renders and
displays the new value so no need to use @track

24. Q&A

25. Thank you