0.23.2 Release Notes

[apapko]

LWC 0.23.2 Release Notes - Revert Forward and Fixes

We are being much more pragmatic about our alignment with shadow dom (which is still the eventual goal). In the 0.23.2 release, we're stepping back to our membrane (proxy) to stabilize and fix recent regressions. In the current release, it helped outline everything we need to do to prepare for shadow dom such as web driver mitigations and utils to help developers shift to shadow dom mindset (right way to get to the element they want).

ETA

EOD. This release has fixes for regressions and broken functionality so we need to get this out asap. Our goal for release communication is a week in advance. However, it's been hard for us to track fixes in advanced. Thanks for understanding.

CHANGES

Use util in jest tests to get correct querySelector

Reasoning for change: encapsulate to reduce manual updates in the future
Example of current way

element.shadowRoot.querySelector('.foo');

Example of correct way

import { getShadowRoot } from 'lwc-test-utils';
getShadowRoot(element).querySelector('.foo');

We are moving back to wrapping DOM nodes in proxies

• Please be prepared to unwrap when necessary

event.target on async events will now resolve to the highest level element in the LWC component tree.

• Supporting access to patched events asynchronously.
• Applying Shadow DOM semantics when accessing a patched event asynchronously.
• Remove proxy from currentTarget and target when listened for outside of the shadow (global events).
• https://git.soma.salesforce.com/lwc/lwc/commit/da2d3c70d3ad9c1d2eeab863ca74e4a1f95f40d3

<slot> elements are now appearing in the DOM

• Already in 0.22.x
• Might break CSS selectors, and querySelector calls. It can also affect composition like <ul><slot>...<li>, and for that reason, those elements should not be used in composition, only use them if you fully control them in your own template

FIXES

childNodes property is now reporting the right value on elements from the template

• https://git.soma.salesforce.com/lwc/lwc/commit/9cbd853b88ca0e70d2dced8729b99de71a4ec817

eventTarget pointing to slotted elements is now correct

• https://git.soma.salesforce.com/lwc/lwc/commit/594e5085d2dcb3cb999b1362e3370cf3f8756bd9

display CSS rule are now handled properly

• https://git.soma.salesforce.com/lwc/lwc/commit/598d94067d751eefb4049e3b1c7312d31376da26

No more warnings about using a field called state without the @track decorator

• By now, everyone should be using @track intentionally when needed, no more magic about state field.
• https://git.soma.salesforce.com/lwc/lwc/commit/485357e06277d27339c5eafc748f4a40e45c8957

Manual mutations of properties in custom elements are now allowed

• You can implement an input-like component that keeps the UI in sync with your internal state that represents the value of the input.

this.template.querySelector('my-custom-input').value = 'foo';

NEW

assignedSlot property for any element now works as expected

• It points to the <slot> element that is slotting the element or null. Keep in mind that for shadows in closed mode, this property will always be null. As the moment, the mode defaults to open.

<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

let slottedSpan = this.template.querySelector('my-paragraph span')
console.log(slottedSpan.assignedSlot); // logs '<slot name="my-text">'

[apapko]

Closing as this has been already published.