Enable a LWC component to render in light DOM

 render lwc components outside of the shadow tree.

-> Enables global application styling

-> Ease 3rd party tools integration.

<template lwc:render-mode='light'>

    <my-header>

        <p>Hello World</p>

    </my-header>

</template>

import { LightningElement } from 'lwc';

export default class LightDomApp extends LightningElement {

    static renderMode = 'light'; // the default is 'shadow'

}

No Shadow root is created within the component.

Styles aren't scoped anymore.

Event's are retargeted.

<slot> elements aren't rendered in the DOM.