To fire a custom event called CustomEvent from the Lightning web component and propagate it up to the DOM,the developer must set two event settings: bubbles and composed. The bubbles setting determines whether the event bubbles up through the component's ancestors in the DOM tree. The composed setting determines whether the event crosses the shadow boundary and reaches the light DOM. Setting both bubbles and composed to true allows the event to be handled by any element in the DOM that listens for it. The cancelable setting is not required for firing or propagating the event, as it only determines whether theevent can be canceled by calling preventDefault() on it. Setting composed to false would prevent the event from reaching the light DOM and limit its propagation to the shadow DOM. Salesforce References: Lightning Web Components Developer Guide: Create and Dispatch Events, Lightning Web Components Developer Guide:
Event Propagation