v7.0.0 (prerelease)

LWC v7.0.0 contains breaking changes. Please read carefully below if you are upgrading from v6.

If you are upgrading from v5, please upgrade to v6 first.

Note

LWC v7 corresponds to Salesforce release Winter '25 (API version 62).

New features

• Class object binding for more ergonomic classes in templates
• this.style for a more ergonomic way to change component styles at runtime
• this.hostElement for an alternative to this.template.host that works in light DOM

Summary of breaking changes

• Class object binding
• New this.style property
• New this.hostElement property
• Improved TypeScript types
• @lwc/template-compiler API changes

Breaking changes

Class object binding

Note

On the Salesforce Lightning platform, this change only applies to components with an API version of 62 or above.

Class object binding is a new feature that makes it more ergonomic to render class attributes in your LWC components. As part of this feature, class rendering has changed for some uncommon use cases.

If you are using a dynamic class in your template:

<template>
  <div class={myClass}></div>
</template>

Then the rendering of this class may change if you were previously defining myClass as something other than a string, null, or undefined.

For example, consider if myClass is a boolean:

export default class extends LightningElement {
  myClass = false
}

Old behavior:

This renders:

<div class="false"></div>

New behavior:

<div class=""></div>

This change applies to booleans, numbers, functions, arrays, and objects. Below is a table summarizing the change:

Type	Example	Rendered (old)	Rendered (new)
Boolean	true	class="true"	class=""
Number	1	class="1"	class=""
Function	() => {}	class="() => {}"	class=""
Array	["a", "b"]	class="a,b"	class="a b"
Object	{ a: true }	class="[object Object]"	class="a"

In short:

• Booleans, numbers, and functions are no longer directly stringified, but are stripped instead.
• Arrays and objects are no longer stringified, but instead follow class object binding semantics.

This may break a component if it is using a CSS selector like these:

.false {}
.true {}
[class="1"] {}

Or if it is using querySelector or other traversal techniques that rely on the class name:

this.template.querySelector('.false')
this.template.querySelector('.true')
this.template.querySelector('[class="1"]')

In rare cases, this can also cause breakages across component boundaries. For example, if you have a global stylesheet relying on light DOM or synthetic shadow DOM, and thus the ability to pierce inside of components you don't own, then the above CSS selectors would break in that case as well.

To resolve any breakages:

• Avoid anti-patterns for styling components.
• In cases where you want to render a value as a string (e.g. class="false" or class="1"), convert it to a string using String(value).

This change may also require updating snapshots, e.g. in Jest tests.

New this.style property

Note

On the Salesforce Lightning platform, this change only applies to components with an API version of 62 or above.

Components can now access their CSSStyleDeclaration using this.style:

renderedCallback() {
  this.style.color = 'red'
}

This is a breaking change if the component uses this.style as an expando:

renderedCallback() {
  if (!this.style) {
    this.style = "foo"
  }
}

In the above case, the component author may assume that this.style is initially undefined, and then set it to a new value ("foo"). After this change, the above code will not work as expected, because this.style is initially truthy rather than undefined.

To resolve this, set a class property on the component, initialized to undefined, rather than using an expando:

+ style = undefined
  
  renderedCallback() {
    if (!this.style) {
      this.style = "foo"
    }
  }

You may also rename your this.style expando to something else (e.g. this.customStyle).

New this.hostElement property

Note

On the Salesforce Lightning platform, this change only applies to components with an API version of 62 or above.

Components can now access this.hostElement as a convenient alternative to this.template.host:

renderedCallback() {
  console.log(this.template.host) // <x-component>
  console.log(this.hostElement)   // <x-component>
}

Additionally, this works in light DOM components to access the "host" element (similar to the :host CSS pseudo-class in light DOM scoped styles). This provides an ergonomic way to access the root HTMLElement object in either light DOM or shadow DOM components.

Similar to the new this.style property, this is a breaking change if you are using this.hostElement already as an expando. Refer to the this.style release notes for a resolution.

Improved TypeScript types

Note

This change only applies to component authors using TypeScript, which is not yet fully supported.

• The minimum supported version of TypeScript is v5.4.5.
• The only supported compiler target is "ESNext".
• ContextValue has been renamed to WireContextValue.
• ContextConsumer has been renamed to WireContextConsumer.
• Contextualizer has been renamed to WireContextProvider.
• StylesheetFactory has been renamed to Stylesheet.
• StylesheetFactories has been renamed to Stylesheets.
• StringKeyedRecord has been removed. Instead, use the type Record<string, any>.
• ShadowSupportMode has been removed. Instead, use the string values "any", "reset", or "native".
• WireAdapter is now a generic type with a default type parameter.
• WireAdapterConstructor is now a generic type with a default type parameter.
• All decorators can now be used with the new decorator implementation introduced in TypeScript v5 as well as the old, experimental implementation.
• this.template is now possibly null, reflecting the state for components using light DOM.
• this.template.host in a LightningElement is now typed as HTMLElement, rather than the broader Element.
• The return type of createElement has been updated to reflect the fact that the element created contains the @api-decorated props from the component definition.
  • A new helper type, LightningHTMLElement, has been introduced to provide an easy way of accessing the return type.

    const cmp: LightningHTMLElement<MyComponent> = createElement('my-component', { is: MyComponent });

  • WARNING: Due to limitations of TypeScript, this new type incorrectly contains all props defined on the component, not just decorated props. Only decorated props are accessible at runtime.
• Importing from "lwc" now provides module definitions for HTML/CSS imports. The module definitions are also available by directly importing a new package, @lwc/types.

@lwc/template-compiler API changes

Note

This change only affects direct consumers of the @lwc/template-compiler npm package, who are using the compile API.

Due to a refactoring of the @lwc/compiler and @lwc/template-compiler packages, the @lwc/template-compiler compile function now requires the component's file name (i.e. the namespace and name options) when compiling the template.

To resolve the breaking change, add the new options. For example:

import { compile } from '@lwc/template-compiler'

compile({
  ...previousOptions,
  // Assuming the component is `<x-foo>`:
  namespace: 'x',
  name: 'foo',
})