Summer ’22 Enhancement for Lightning Web Components
@SalesforceCodex
Light DOM allows us to open up our components to the page and avoid the shadow DOM limitations. This makes it much easier to inherit global styles from our page and integrate with third-party libraries.
0218
Introducing light DOM
No need to use a template while query selector.We can use this.querySelector()instead of this.template.querySelector() asthere is no template and no shadow tree.
0218
Query Selector
We need to enable rendor mode for each LWC.<template lwc:render-mode='light'>
<my-header>
<p>Hello World</p>
</my-header>
</template>
0218
Enable Light DOM Mode
New base core components for Alert, Popup, and Confirm are added. We can easily use like below.LightningAlert.open({ message: 'this is the alert', variant: 'headerless',}).then((result) => { console.log('alert result', result);});
0218
New Base components
In Developer Preview — we can build components in mixed shadow mode.export default class extends LightningElement {
static shadowSupportMode = 'any';
}