Using Styling Hooks to Customize Your LWC
Download as PPTX, PDF0 likes889 views
The document discusses styling in Lightning Web Components using styling hooks. It begins with an overview of styling in Lightning and classic components. It then covers how LWC uses web standards like shadow DOM and CSS custom properties to provide encapsulation and the ability to override styles. Styling hooks are introduced as CSS custom properties that allow easy customization of any web component through variable values. The document demonstrates how the same component can have different designs using styling hooks.
Using Styling Hooks to Customize Your LWC
- 2. Forward Looking Statement "Safe harbor" statement under the Private Securities Litigation Reform Act of 1995: This presentation contains forward-looking statements about the company's financial and operating results, which may include expected GAAP and non-GAAP financial and other operating and non-operating results, including revenue, net income, diluted earnings per share, operating cash flow growth, operating margin improvement, expected revenue growth, expected current remaining performance obligation growth, expected tax rates, stock- based compensation expenses, amortization of purchased intangibles, shares outstanding, market growth, environmental, social and governance goals and expected capital allocation, including mergers and acquisitions, capital expenditures and other investments. The achievement or success of the matters covered by such forward-looking statements involves risks, uncertainties and assumptions. If any such risks or uncertainties materialize or if any of the assumptions prove incorrect, the company’s results could differ materially from the results expressed or implied by the forward-looking statements it makes. The risks and uncertainties referred to above include -- but are not limited to -- risks associated with the effect of general economic and market conditions; the impact of geopolitical events, natural disasters and actual or threatened public health emergencies, such as the ongoing Coronavirus pandemic; the impact of foreign currency exchange rate and interest rate fluctuations on our results; our business strategy and our plan to build our business, including our strategy to be the leading provider of enterprise cloud computing applications and platforms; the pace of change and innovation in enterprise cloud computing services; the seasonal nature of our sales cycles; the competitive nature of the market in which we participate; our international expansion strategy; the demands on our personnel and infrastructure resulting from significant growth in our customer base and operations, including as a result of acquisitions; our service performance and security, including the resources and costs required to avoid unanticipated downtime and prevent, detect and remediate potential security breaches; the expenses associated with our data centers and third-party infrastructure providers; additional data center capacity; real estate and office facilities space; our operating results and cash flows; new services and product features, including any efforts to expand our services beyond the CRM market; our strategy of acquiring or making investments in complementary businesses, joint ventures, services, technologies and intellectual property rights; the performance and fair value of our investments in complementary businesses through our strategic investment portfolio; our ability to realize the benefits from strategic partnerships, joint ventures and investments; the impact of future gains or losses from our strategic investment portfolio, including gains or losses from overall market conditions that may affect the publicly traded companies within our strategic investment portfolio; our ability to execute our business plans; our ability to successfully integrate acquired businesses and technologies; our ability to continue to grow unearned revenue and remaining performance obligation; our ability to protect our intellectual property rights; our ability to develop our brands; our reliance on third-party hardware, software and platform providers; our dependency on the development and maintenance of the infrastructure of the Internet; the effect of evolving domestic and foreign government regulations, including those related to the provision of services on the Internet, those related to accessing the Internet, and those addressing data privacy, cross-border data transfers and import and export controls; the valuation of our deferred tax assets and the release of related valuation allowances; the potential availability of additional tax assets in the future; the impact of new accounting pronouncements and tax laws; uncertainties affecting our ability to estimate our tax rate; uncertainties regarding our tax obligations in connection with potential jurisdictional transfers of intellectual property, including the tax rate, the timing of the transfer and the value of such transferred intellectual property; the impact of expensing stock options and other equity awards; the sufficiency of our capital resources; factors related to our outstanding debt, revolving credit facility and loan associated with 50 Fremont; compliance with our debt covenants and lease obligations; current and potential litigation involving us; and the impact of climate change. Further information on these and other factors that could affect the company’s financial results is included in the reports on Forms 10-K, 10-Q and 8-K and in other filings it makes with the Securities and Exchange Commission from time to time. These documents are available on the SEC Filings section of the Investor Information section of the company’s website at. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements, except as required by law. Third party trademarks are the property of their owners.
- 4. Intro About Me Kirupa Chinnathambi Senior Director of PM SLDS + Base Components kirupa.com @kirupa 😀 🤓 😛 🔥 🍔 ✏️ 🍕 😎 🚀 🐱 🐈 🤓🤓 The emojis I use the most!
- 5. Lightning Web Components (and the Styling Story) 1
- 6. Styling Story Your UI Path Today Lightning (Aura) Classic Lightning Web Components
- 7. Styling Story Your UI Path Today Lightning (Aura) Classic Lightning Web Components This is where we are focusing on!
- 8. Styling Story What are Lightning Web Components? Lightning Web Components (LWC) is a new programming model for building Lightning components. It is built around web standards: custom elements, templates, shadow DOM, CSS custom properties, decorators, modules, and more!
- 9. Styling Story What are Lightning Web Components? Lightning Web Components (LWC) is a new programming model for building Lightning components. It is built around web standards: custom elements, templates, shadow DOM, CSS custom properties, decorators, modules, and more!
- 10. Styling Story What are Lightning Web Components? One of the benefits you get with LWC and its dependency on custom elements and shadow DOM is a new and improved way of styling that is optimized for the complex web apps we all tend to build today.
- 11. The web started out as a document-centric place to view large amounts of text and navigate between pages with...large amounts of text!
- 15. Over the years, the web technologies have evolved to allow sites to be more natural and app-like with a strong focus on user experience.
- 21. (SPA)
- 24. Modern apps are composable and made up of reusable elements where smaller parts are combined to create larger parts. This extends to both functionality as well as styling. Styling Story Composability
- 25. CSS was not really designed for a composable world. *
- 26. The marquee feature of CSS is its cascading nature where styles from a parent have the ability to influence the styles of a descendant. That doesn’t work well in a composable world where we need style encapsulation. Styling Story The C is for Cascade
- 29. What we need are two things: 1. Ability for styles to be self-contained to just the reusable element 2. Supported mechanism to override and set styles on a reusable element from a parent element Styling Story Encapsulation
- 30. Web standards to the rescue!
- 31. What we need are two things: 1. Ability for styles to be self-contained to just the reusable element 2. Supported mechanism to set and override styles on a reusable element from a parent element Styling Story Encapsulation Shadow DOM CSS Custom Properties (aka CSS Variables)
- 32. Shadow DOM, a part of the Web Components standard, helps to isolate the internals of a component from the rest of the document, including styling. This protects us from breaking CSS changes, global styles, or any side-effects of cascading. Styling Story Shadow DOM
- 33. Styling Story Shadow DOM Your UI won’t change depending on the context!
- 34. The primary way you can customize the CSS inside the Shadow DOM is by relying on CSS Custom Properties (aka CSS Variables) to change and override property values. The way you use them is similar to how you would use variables in JavaScript. Styling Story CSS Custom Properties :root { --myAlign: center; } #container { width: 100%; height: 350px; background-color: #0099FF; display: flex; align-items: var(--myAlign); justify-content: var(--myAlign); }
- 35. 1. With Shadow DOM, you get style encapsulation 2. With CSS Custom Properties, you have the ability to customize the parts of the UI that have been exposed for customization Styling Story Takeaway
- 36. Styling Hooks 2
- 37. 37 Styling hooks offer an easy, supported way of making styling customizations to any web component (such as a Base Component)! --sds-styling-hooks: “awesome”; Styling Hooks and LWCs They are nothing more than CSS Custom Properties!
- 38. 38
- 39. 39 Same Component, Different Design Lightning web component Customer A Customer B
- 40. 40
- 42. 42
- 43. 43 :host { /* Store local brand colors */ --product-color-1: #d53b00; --product-color-2: #c63700; --product-color-3: #5693F5; --product-color-4: #fff; /* Styling Hooks */ /* ------------- */ --sds-c-button-radius-border: 0; --sds-c-button-line-height: 2rem; --sds-c-badge-radius-border: 3px; --sds-c-badge-color-background: var(--product-color-4); --sds-c-badge-color-border: var(--product-color-3); --sds-c-badge-text-color: var(--sds-c-badge-color-border); --sds-c-button-brand-spacing-inline-start: 1.5rem; --sds-c-button-brand-spacing-inline-end: 1.5rem; --sds-c-button-brand-color-background:var(--product-color-1); --sds-c-button-brand-color-border: var(--product-color-1); --sds-c-button-brand-color-background-hover: var(--product-color-2); --sds-c-button-brand-color-background-active: var(--sds-c-button-brand-color-background-hover); --sds-c-button-brand-color-border-hover: var(--sds-c-button-brand-color-background-hover); --sds-c-button-brand-color-border-active: var(--sds-c-button-brand-color-border-hover); --sds-c-button-shadow: inset var(--product-color-1) 0 0 0 2px, inset var(--product-color-4) 0 0 0 3px; --sds-c-tabs-item-color-border-active: var(--product-color-1); --sds-c-tabs-item-color-border-hover: var(--product-color-2); }
- 44. 44
- 45. Q&A
- 47. Provide Your Valuable Feedback bit.ly/ltngfeedback