Modifying a Css property inside shadowRoot with Blazor when loading the component

I am building a custom login Blazor component which includes pwa-auth federated social login component. I need to adjust the width of pwa-auth buttons, which is controlled by provider class inside the shadowRoot of the inner component. Next function does the trick:

function StylePwAuth() {
    var pwaAuth = document.getElementById('pwa-auth');
    var shadowroot = pwaAuth.shadowRoot;
    var providers = shadowroot.querySelectorAll('.provider');
    providers.forEach((provider) => {
        provider.setAttribute('style', 'width:100%!important');
    });
}

The problem is how to call it once the DOM is ready. If I call it on component OnAfterRender, var providers.length is still 0. But if I call it from a test link on same page, it works Ok. How could I call it once the DOM is available?

<a href="#" @onclick="Test">test</a>
<pwa-auth id="pwa-auth"
                microsoftkey="..."
                appearance="list">
</pwa-auth>

@code {

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        JS.InvokeVoidAsync("StylePwAuth");
    }

    void Test()
    {
         JS.InvokeVoidAsync("StylePwAuth");
    }
}