LWC Styling Hooks: Summer '21 Salesforce Release

Dakota VanOs – June 11, 2021


Hello, Andrew here with Digital Mass here for more Summer 21 features. It's Friday, June 11th. That should mean that your production org has been updated with new summer 21 features or will be tomorrow on the 12th, just depends on your instance, but this is a really exciting day. Hopefully, we'll be seeing a lot of what we've been talking about over the last week or so coming into your org with many more features being supported, of course, to always encourage you guys to take a look. If you haven't already at the Summer 21 release notes, get a quick, catch-up to make sure that you're familiar with what's happening, what's changing inside your environment, and be prepared to address any sort of issues that may come up with some new enforced updates, things like that.

Today we have one last feature to cover with you guys, which is one that I'm super passionate about.
We now have a new out-of-the-box standard supported styling hook feature that will let you in your CSS files, reference predefined styling hooks that are described on the lightning design systems website for each base component. You can reference those inside your CSS and set custom values for those styling hooks. So for example, you can set background color properties. You can set border properties hover color properties, text color, things like that... really take advantage of a lot of the branding related silent decisions that you may be making this added silence really gives you full flexibility, taking your branding and dropping it into your organization fully and that does apply to all components too. So, this isn't relegated to a particular subset. It should work for components that are exposed virtually anywhere on your platform. So anything: think components, styling hooks are definitely a huge feature. I would highly encourage developers to take a look at what is supported by component because it is not universal and ubiquitous - not standardized. Definitely take a look at what is supported for the particular component you want to style. And hopefully, that will help make your life a little bit easier and reduce the number of imported CSS you're needing to sort of request from your static resources. And that really kind of covers it for the features that we care about most with summer 21, guys, there is really so much out there. We could be talking for weeks yet about all of the really cool things that you should be expecting to see, but we hope that you'll find these videos helpful and we hope to cover the next release as well. So thanks. Thanks so much. If there's any way that digital mass can help you take more advantage of the summer 21 feature set, reach out to us on digitalmass.com looking forward to interacting with you. Thank you.

About the developer:

Meet Andrew Davis: Andrew joined the Digital Mass team as a Senior Salesforce Developer in August 2020. He came in with a few certifications on his belt and hasn't slowed down since. Andrew currently holds Platform Developer 1, Platform Developer 2, Certified Administrator, Platform App Builder, Marketing Cloud Email Specialist, Marketing Cloud Developer, and the Javascript Developer certifications.

Outside of work, Andrew likes to spend his time playing D&D, camping, and burying himself in Youtube playlists exploring things ranging from emerging technologies to how to hand-sew your own socks - it’s pretty obvious he fits right in with the DM crew!