[Summer'24] 気になるリリースをピックアップ〜LWC編〜
この記事はゆるっとSalesforceトーク #34 Summer '24リリースノートピックアップ で発表した内容をまとめたものです。
Summer'24のリリースノートからLWC関連で気になるリリースをピックアップしました。
LWC API バージョン 61.0 で LWC の最新変更の取得
Version 61.0の主な変更点は3つです。
その他の細かい変更点はLWC(OSS)の Release v6.0.0 · salesforce/lwc を確認してください。
ElementInternals Web API を使用したカスタムフォームの作成
ElementInternals - Web API | MDN を使えるようになりました。これによりLWCをHTMLフォーム要素として使うことができるようになります。
Update Your Light DOM Components for Improved Slot Forwarding
Light DOMで以下のようにslotの伝搬を行えるようになりました。
<!-- container.html -->
<template>
<c-outer>
<span slot="namedSlot">Named slot content</span> // Content to pass from namedSlot into forwardedSlot
</c-outer>
</template>
<!-- outer.html -->
<template lwc:render-mode="light">
<c-inner>
<slot name="namedSlot" slot="forwardedSlot"></slot> // The namedSlot slot
</c-inner>
</template>
<!-- inner.html -->
<template>
<slot name="forwardedSlot"></slot> // The forwardedSlot slot
</template>Call Component Lifecycle Hooks Using Native Browser APIs
ライフサイクルフックがコールされるタイミングが変更になりました。
リリースノートよりも GitHubのReleaseに詳しく書いてありました。
Native custom element lifecycle - Release v6.0.0 · salesforce/lwc
こちらには5つの変更が記載されていますが、Salesforce上で動作させる際に関係のある2つを紹介します。
connectedCallbackがコールされるのは、LWCがdocumentのDOMツリーに追加された時になりました
Version 61.0よりも前だと以下のように、divにappendChildした場合でもconnectedCallbackがコールされていました。
export default class Foo extends LightningElement {
connectedCallback() {
this.dispatchEvent(new CustomEvent('foo', { bubbles: true, composed: true }))
}
}
const element = createElement('x-foo', { is: Foo })
const div = document.createElement('div')
div.addEventListener('foo', () => {
console.log('received foo event!')
})
div.appendChild(element) // triggers connectedCallbackversion 61.0からは、以下のようにdocumentのDOMツリーに追加されたタイミングでコールされるようになりました。
document.body.appendChild(div)connectedCallbackで発生したエラーはtry-catchでは処理できなくなりました
Version 61.0よりも前だとtry-catch句で処理できていました。
export default class Foo extends LightningElement {
connectedCallback() {
throw new Error('foo')
}
}
And then you expect to be able to catch the error synchronously on appendChild:
const element = lwc.createElement('x-foo', { is: Foo })
try {
document.body.appendChild(element)
} catch (error) {
console.log('caught error', error)
}Version 61.0からはwindowでerrorイベントをリッスンします。
const listener = (error) => {
console.log('Caught error', error)
}
try {
window.addEventListener('error', listener)
document.body.appendChild(element);
} finally {
window.removeEventListener('error', listener)
}lwc-jestで同様のことをやっている場合は、新しく追加されたexpect().toThrowInConnectedCallback メソッドの使用が推奨されます。
LWC でのサードパーティ Web コンポーネントの使用 (Beta)
こちらはBetaリリースです。
サードパーティのWeb Componentsが使えるようになります。
こちらに具体的な使い方が記載されています。
Use Third-Party Web Components in LWC (Beta) | Create Lightning Web Components | Lightning Web Components Developer Guide | Salesforce Developers
WebComponentsは静的リソースから読み込む、またはLWCのJavaScriptファイルで定義することができます。
WebComponents利用するには、lwc:externalを追加する必要があります。利用する場合のHTMLは以下のようになります。
<template>
<p>
Relative time (auto-updated every minute):
<relative-time
lwc:external
datetime={date}>
</relative-time>
</p>
</template>URL アドレスで Lightning Web コンポーネントへの移動
LWCにURLでアクセスできるようになりました。
メタファイルにlightning__UrlAddressableを追加、isExposedをtrueとすると、URLが発行されます。
<!-- myComponent.js-meta.xml -->
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>59.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__UrlAddressable</target>
</targets>
</LightningComponentBundle>LWCからはNavigationMixinを使うことでアクセスできます。
componentNameのフォーマットは namespace__componentName です。
stateのプロパティは、キーが namespace__propertyName、値は文字列である必要があります。
this[NavigationMixin.Navigate]({
// Pass in pageReference
type: 'standard__component',
attributes: {
componentName: 'c__myComponent',
},
state: {
c__propertyValue: '2000',
},
});これで発行されるURLは、{OrgUrl}/lightning/cmp/c__MyComponent?c__propertyValue=2000となりました。
ユーティリティバー内のユーティリティの制御
LWCからユーティリティバーを操作するためのAPIが追加されました。
このAPIはLightning Web Securityが有効である必要があります。
各APIの具体的な使い方は以下に記載されています。
Methods for the Utility Bar in Lightning Experience | Salesforce Console Developer Guide | Salesforce Developers
追加されたAPIは以下になります。
enableModal()—モーダルモードの有効/無効を切り替えます。
enablePopout()—ポップアウトの有効/無効を切り替えます。
getAllUtilityInfo()—すべてのユーティリティの状態を取得します。
getInfo()—ユーティリティ自身の状態を取得します。
minimize()—ユーティリティを最小化します。
onUtilityClick()—ユーティリティにクリックイベントリスナーを追加します。
open()—ユーティリティを開きます。
updatePanel()—開いたあとのパネルのアイコン、ラベル、横幅、縦幅を更新します。
updateUtility()—ユーティリティバーに表示されるアイコンとラベルを更新します。
Lightning Web セキュリティ有効化のロールアウトが延期されました
Lightning Web Securityの強制有効化は延期されました。しかし今後有効化が進んでいくので、現在の組織で無効な場合はサンドボックス環境で有効化してテストすることが推奨されています。
以上です！
少しずつ改善されていくLWCに今後も期待です！