Webdriverio: Accessing shadow dom elements

Question

I have an app structure like this: 
<shell>
#shadow-root (open)
<mini-app>
#shadow-root (open)
<input id="username" autocomplete="off" name="username" type="text" aria-required="true" required="" value="">
</mini-app>
<shell>
Nested tags with shadow-root element username inside it.I want to access input element username using webdriverio.

I am able to access username in dev using the following:

   let a = document.querySelector('shell')
    let b = a.shadowRoot.querySelector('mini-app')
    b.shadowRoot.getElementById('username')

  How can i access the same using webdriverio ? I went through this `https://webdriver.io/blog/2019/02/22/shadow-dom-support.html` but the documentation looks outdated because I am unable to use shadowRoot with shadow$
Any help would be appreciated.

Is there any other way to access shadow dom elements through webdriver?

Answer 1

Documentation seems to be fine, can you show how exactly you are using shadow$ method?

I belive that simple

$('shell').shadow$('.mini-app').shadow$('#username')

should work