[SalesForce] event.getSource() alternative in LWC? (considering origin reparenting)

As you've mentioned above, if you are able to catch the tab switching activity in parent component and based on that call the aura:method, this should be working fine and should not give you problem of aura:registerEvent and other tags not rendering.

Approach 1

Recommended as this will not require lot of code re-structuring and work with your existing implementation:

Continue with your existing implementation and find out syntax issue if any.

Approach 2:

Use Renderer that calls same code as init():

afterRender: function (component, helper) {
    this.superAfterRender();
    helper.doInit(); //call required JS code or do DOM manipulation if required.
},

• Move your init code in a helper method. Call this helper ,method from afterRenderer() in renderer file of lightning component bundle.

• This way, you won't need to call init() explicitly using aura:method and everytime the component is rendered, your required code would be called.

• Cons: afterRenderer() may be called multiple times if any DOM is changed causing unnecessary execution of code. This will then require to add logic to avoid the code repetition.

Approach 3:

Inheritance in lightning components

<!--c:super-->
<aura:component extensible="true">
    <aura:attribute name="state" type="String" default="Default description" />
    <!-- add a component event handler here -->
    <aura:handler name="cmpEvent" event="c:ceEvent" action="{!c.updateState}" />
</aura:component>

<!--c:sub-->
<aura:component extends="c:super">
    <!-- Throw event to super component with updated state as parameter.-->
    <aura:registerEvent name="cmpEvent" type="c:ceEvent"/> 
    <p>State at any time: {!v.state}</p>
</aura:component>

• Maintain a "super" component that will be inherited by all child components. This "super" component can be the main parent component. It will have an attribute say "state" that will maintain all information required by all child components at any point of time. This information will be in JSON format.
• All child components will have to update this attribute every time anything inside them changes(Say an event is added as per above example).
• Thus, this state will be the updated state of all information to which any other child component can refer to at any time.

There is a good example of this topic on Handle Events in Lightning Web Components trailhead which discusses the same use case as you have here (and answers both your questions).

The idea is to chain the events up the hierarchy. So basically you will need to handle the event being propagated in every component and then pass it on up in the hierarhcy.

Below excerpt and the image from the linked trailhead module describes this in detail :

Events Up, Properties Down

In a complex component (one that contains several parent and child components) we recommend you propagate the event up through the component hierarchy, so parent components can respond to child events. If you have other child components (not the one firing the event) you can pass a property down to those children in response to the event.

(Image Source: Handle Events in Lightning Web Components)

Update : Passing event from grand-child to grand-parent

Lets say we have a LWC component structure as follows.

We can pass event values between grand-child and grand-parent or the top most root component as follows.

Use bubbles : true to pass values up the component hierarchy. And use composed : true if you want to expose the event outside the shadow root.

grandChild.js

const sampleEvent = new CustomEvent('search', { bubbles : true, detail: { foo : 'bar' }, composed : true });
this.dispatchEvent(sampleEvent);

Note: If an event uses this configuration bubbles:true & composed:true, the event type becomes part of the component’s public API. It also forces the consuming component and all of its ancestors to include the event as part of their APIs.

This way, we don't have to handle this event in the parent component , Instead in grand parent we can handle it as follows

grandParent.html

<c-parent onsearch={handleSearch}></c-parent>

grandParent.js

handleSearch = (event) => {
   console.log(event.detail);
}

For more details , refer - LWC Events Propagation