How to use properly new getShadowRoot API

[irondev84]

I saw in documention very simple example of getShadowRoot:

const shadowRootEl = await browser.getShadowRoot('popup-info');
const infoElement = await shadowRootEl.find('.info');

But the question is how to use the getShadowRoot command when shadowRoot elements exist inside another shadowRoot element?
Unfortunately I stuck with it in my project.

Should I write something like this:

const shadowRootLevel1 = await browser.getShadowRoot('popup-info');
const infoElement1 = await shadowRootEl.find('.info');
const shadowRootLevel2 = await browser.getShadowRoot('popup-info2');
const infoElement2 = await shadowRootEl.find('.info2');

or

const shadowRootLevel1 = await browser.getShadowRoot('popup-info');
const shadowRootLevel2 = await browser.getShadowRoot(shadowRootLevel1);
const shadowRootLevel3 = await browser.getShadowRoot(shadowRootLevel2);
const infoElement1 = await shadowRootEl3.find('.info2');

Please help me to understand this. The only first line works fine:
const shadowRootLevel1 = await browser.getShadowRoot('popup-info');
and the shadowRootLevel1 is web element.
But what to do next if the next element in DOM is shadow element also.

Is anyone can do it in some project ?