Salesforce Winter '27: Key Lightning Components You Shouldn't Miss

With every Salesforce release comes three large updates during one year, and there are definitely some pieces of good news when it comes to Lightning Web Components in Winter '27 release. There are some features developers have been waiting for in order to leave beta status and to be used in the production environment. In addition to this, there is some security update and a new AI capability that might be valuable. 

Now let's take a closer look at them. 

Update Your Components to API Version 68.0

There is an API version in each LWC, defined in a .js-meta.xml file. The main idea behind it is to specify for Salesforce to treat the particular component in the certain way. Therefore, every time Salesforce makes some changes under the hood, it will not break your components right away, but your component will keep working as it has been before. 

<?xml version="1.0" encoding="UTF-8"?>  
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> 
	<apiVersion>68.0</apiVersion>  
</LightningComponentBundle>  

A Security Change to Watch: window.open() and Same-Origin Links

It is more of a "gotcha," but this is a sneaky one that could silently break something in your codebase if you are not careful, so it is best caught now. From Winter '27, calling window.open(url, '_blank') on a same-origin Salesforce URL will throw a LockerSecurityError when running under Lightning Web Security.

The good news is that the workaround is quite simple. You can use a detached anchor element rather than window.open():

const a = document.createElement('a');  
a.href = url;  
a.target = '_blank';  
a.rel = 'noopener noreferrer';  
a.click(); // never append this to the page 

Here you create an anchor element, call click(), and just drop it off into the void. The link never becomes part of the DOM. You get the same effect as with window.open() without the error. If you want to open the link in the same tab, simply replace '_blank' with '_top', '_self', or '_parent'. At any rate, you should take five minutes to find any usage of window.open() in your code base before this release.

Also Getting Blocked: data: Links for Downloads 

Continuing along the theme of security, here's one that could be a bit tricky to spot. For all those scripts that are using the data: URI scheme to create download links, it's now getting blocked as well.

// No longer works with LWS 
const textEncoded = data:text/plain,${encodeURIComponent('text string')};  
let anchorTag = document.createElement('a');   
anchorTag.setAttribute('href', textEncoded);  
anchorTag.setAttribute('download', 'nameoffile.crt');  
anchorTag.click(); 

Why? Because data: links essentially embeds an entire file into a URL, which creates numerous security issues. The solution? Use blob: URLs with Blob instead:

const blob = new Blob(['text string'], { type: 'text/plain' });  
const blobUrl = URL.createObjectURL(blob);  
const anchorTag = document.createElement('a');  
anchorTag.setAttribute('href', blobUrl);  
anchorTag.setAttribute('download', 'nameoffile.crt');  
anchorTag.click();  
URL.revokeObjectURL(blobUrl); 

blob: links always remain attached to the page they were created on and thus follow the same rules as all other resources on it. A much more secure method of downloading files. Note that enforcement of this rule was not in place as of Summer '26, so if your script has worked flawlessly until now, this update might be the reason for its failure.

Complex Template Expressions Are Now Generally Available

Here is an example of how this was a problem before Winter '27 release: LWC templates were incapable of making any decisions – the values were passed as they were. In other words, it took a separate function (getter) to render different colors depending on the status of the record, which looked something like this:

<template> 
 	<span class="slds-badge slds-theme_{(status === 'Active' ? 'success' : 'error') }"> 
 		{record.status} 
 	</span> 
</template>

As you might guess, a couple of such calls would result in an abundance of small getters within a single JS file without any actual logical meaning behind.

With Winter '27 release, it is possible to write actual JavaScript logic within templates.

 <template>  
	<span class="{record.status === 'Active' ? 'slds-badge slds-theme_success' : 'slds-badge slds-theme_error'}">  
		{record.status}  
	</span>  
</template>  

Also note: apiVersion 66.0 or higher will be needed on the component.

Use Third-Party Web Components with lwc:external

The fact is that there are thousands of components that work really well and are already built using standard web technologies – charts, editors, calendars, all of them work just fine out of the box. LWC is based on these standard technologies too, yet for years its compiler stubbornly refused to render any tag that was not known to it. Thus, if you wanted to use a custom component that was not built by Salesforce, you had no choice but to wrap it into an iframe, with all the associated problems of styling and passing data to it.

All that changes now with Winter '27 release, where the lwc:external directive is GA – add it to any tag you want to use and LWC will render this component natively, exactly as it is done in browsers.

<template>  
	<awesome-chart lwc:external data={chartData}> </awesome-chart>  
</template>  

Since this component is now rendered natively rather than wrapped into iframe, passing data to it is as easy as setting any LWC property.

Refresh State Manager Data on Demand

The solution to sharing data in the form of related list records between components is state managers in LWC. However, there is one problem in doing this – in case the data changes on the server side, it can be refreshed by only reloading the whole page or reinitializing the whole state manager.  

This issue has been solved in Winter '27 using an automatic refresh() action:

async handleRecordCreated() {  
	if (this.state.status === 'loaded') {  
		await this.state.refresh();  
	}  
} 

All you need to do is to invoke it when the state manager reaches status = loaded, and it will return you a promise which is resolved when new data is available. And it works exclusively with list or query shaped data such as related lists.

No page refresh required. The related list automatically gets the latest records from Salesforce using state.refresh(). This is especially useful for related lists and query-based data

Control Console App Navigation from Code

This article would be great for you if you develop console applications in Lightning. Winter '27 brings a much more contemporary way of handling navigation items using the lightning/platformNavigationItemApi without depending only on manual clicking. It offers five promise-based functions:

• focusNavigationItem() navigates to the homepage of the given item.

• getNavigationItems() retrieves all the items present in the navigation.

• getSelectedNavigationItem() retrieves the currently selected navigation item.

• setSelectedNavigationItem(developerName) selects the given item based on the developer name.

• refreshNavigationItem() refreshes the current view.

Bring External Applications Into Salesforce With Microfrontend (UI Embedding)

Now, this is something big! Salesforce Microfrontend, which goes by the name of UI Embedding, is now completely ready, and it allows you to integrate an existing external web application directly into a Salesforce page rather than redirecting users to another tab. This is done through an iframe where Salesforce executes your app in a secured and isolated environment using the lightning-ui-embedding component and provides communication channels between the two.

Features that the communication channel brings:

• Bidirectional data — your app can respond to the events happening at the Salesforce end and vice versa in a secured manner.

• Integration with Salesforce Theme — Salesforce provides its color theme and all the styling details to make sure that your app is consistent in terms of looks with the Salesforce.

• Locale of the User — The Locale information of the user is sent automatically.

• Auto-resizing – the frame surrounding your app adjusts in size based on the content within, and you don’t have to worry about anyone getting stuck with funky scroll bars or truncated content.

• Heads-up about losing work – The usual Salesforce notification about saving changes applies to embedded apps as well.

• Accessibility for screen readers – The embedded region gets an accessible name.

Not restricted to just one framework – Since it is all plain ol’ web components, you can build your app using whatever framework you currently use to build everything else. There is even a vanilla JavaScript option available if you’d prefer not to install any Salesforce packages at all, and a CLI template that helps kick off a new project quickly.

Build Faster with Agentforce Vibes LWC Skills

In contrast to the changes discussed above, the last one doesn’t represent any changes in LWC itself. Instead, it is related to the way the AI tools make your development with LWC easier. Agentforce Vibes has learned several capabilities, which include everything from creation of the components and handling data with LWC, to migration from Aura to LWC and audit of the component for potential quality issues. All of those work automatically based on your request in natural language without any special commands or mode switches. 

Here are a few examples of the requests you can input in the panel directly: "Build a Lightning web component that shows the list of the contacts", "Migrate this Aura component bundle to LWC", and "Audit this component for Lightning Web Security violations".

Conclusion

So that’s Winter ’27 for LWC in summary – another one that is really good, with some changes that have been brewing over many years now. It might be worth spending a whole day of playing in your sandbox with all of this stuff to ensure that none of this breaks on release.

However, it is safe to assume that this won’t be our last update for the year either. Salesforce releases updates very often, and the cycle never ends. Stay tuned.