What's Changed

• build(deps-dev): bump the theoretically-non-breaking group with 5 updates by @dependabot in #4397
• chore: update husky config file by @nolanlawson in #4400
• chore: update .nucleus.yaml and release v7.2.0 for CLCO by @rui-rayqiu in #4402
• chore: update .nucleus.yaml and release v7.2.0 for CLCO by @rui-rayqiu in #4403

Full Changelog: v7.1.2...v7.2.0

What's Changed

• fix(hydration): only ignore mutated host attributes by @nolanlawson in #4385
• chore: release v7.1.2 by @rui-rayqiu in #4392
• chore: release v7.1.2 by @rui-rayqiu in #4393

Full Changelog: v7.1.1...v7.1.2

What's Changed

• fix: do not error if abort controller for stylesheet does not exist @W-16189944 by @ravijayaramappa in #4372
• chore: weekly dependencies update by @ravijayaramappa in #4379
• perf: optimize initial render for nullish class by @nolanlawson in #4380
• chore: update to eslint v9 by @ravijayaramappa in #4378
• build(deps): bump the theoretically-non-breaking group with 7 updates by @dependabot in #4381
• chore(eslint): ignore .gitignored files by @wjhsf in #4383
• chore(dependabot): ignore prettier v3 by @wjhsf in #4387
• chore: configure vscode to use flat config by @wjhsf in #4388
• build(deps-dev): bump the theoretically-non-breaking group with 3 updates by @dependabot in #4389
• chore: release v7.1.1 by @rui-rayqiu in #4390
• chore: release v7.1.1 by @rui-rayqiu in #4391

Full Changelog: v7.1.0...v7.1.1

What's Changed

• test(ci): test hydration with synthetic lifecycle by @nolanlawson in #4368
• fix(engine-dom): warn for insertBefore with 1 arg by @manoharsiriki in #4359
• feat: add data-lwc-host-mutated during SSR by @nolanlawson in #4358
• chore: release v7.1.0 by @nolanlawson in #4376
• chore: release v7.1.0 by @nolanlawson in #4377

New Contributors

• @manoharsiriki made their first contribution in #4359

Full Changelog: v7.0.5...v7.1.0

What's Changed

• fix(perf-benchmarks): add parseHTMLUnsafe polyfill by @nolanlawson in #4367
• fix(template-compiler): remove v6 engine support by @nolanlawson in #4363
• build(deps): bump the theoretically-non-breaking group across 1 directory with 14 updates by @dependabot in #4366
• chore: release v7.0.5 by @nolanlawson in #4369
• chore: release v7.0.5 by @nolanlawson in #4371

Full Changelog: v7.0.4...v7.0.5

What's Changed

• perf: static-optimize xlink:href by @nolanlawson in #4346
• chore: run yarn lint --fix by @nolanlawson in #4355
• test(hydration): add .only support by @nolanlawson in #4356
• test(ssr): use Document.parseHTMLUnsafe by @nolanlawson in #4357
• chore(prettier): format .eslintrc on commit by @nolanlawson in #4361
• perf: static-optimize <a>/<area> href by @nolanlawson in #4354
• chore: release v7.0.4 by @nolanlawson in #4364
• chore: release v7.0.4 by @nolanlawson in #4365

Full Changelog: v7.0.3...v7.0.4

What's Changed

• fix: allow lazy-disabling native lifecycle by @nolanlawson in #4350
• chore: release v7.0.3 by @nolanlawson in #4352
• chore: release v7.0.3 by @nolanlawson in #4353

Full Changelog: v7.0.2...v7.0.3

What's Changed

• perf: static-optimize id/IDref attributes by @nolanlawson in #4330
• fix(class): avoid enumerable prototype for class object binding @W-16109991@ by @wjhsf in #4337
• fix: inline style parsing for "! important" by @Bradels in #4329

New Contributors

• @Bradels made their first contribution in #4329

Full Changelog: v7.0.1...v7.0.2

What's Changed

• feat(scripts): add test:bespoke script by @wjhsf in #4307
• fix(template-compiler): parsed template content should be allocated to content.childNodes by @ekashida in #4311
• fix(template-compiler): correctly handle open curly bracket resulting from html character entity by @ekashida in #4312
• fix: support v6 engine + v7 compiler by @nolanlawson in #4315
• build(deps-dev): bump @rollup/plugin-commonjs from 25.0.7 to 26.0.1 by @dependabot in #4322
• build(deps-dev): bump rollup-plugin-serve from 1.1.1 to 3.0.0 by @dependabot in #4321
• perf(template-compiler): static-optimize spellcheck by @nolanlawson in #4317
• build(deps-dev): bump the theoretically-non-breaking group across 1 directory with 14 updates by @dependabot in #4327
• fix(engine-dom): make native lifecycle all-or-nothing by @nolanlawson in #4316
• chore(ci): rebalance karma tests by @nolanlawson in #4328
• chore: release v7.0.1 by @nolanlawson in #4333
• chore: release v7.0.1 by @nolanlawson in #4334

Full Changelog: v7.0.0...v7.0.1

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.

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

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:

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

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

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

The TypeScript definitions for the lwc package are greatly improved, to more closely match the ground truth of the actual APIs for LightningElement, createElement, etc. at runtime. You may need to adjust your TypeScript code or version to adapt to the new typings.

Summary

• 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.

Common breakages and fixes