Not able to find the locator which is inside a component in Cypress

I am trying to find the dropdown-arrow locator. I have used the cypress cmd – cy.get('.dropdown-arrow').click() but it gives element not found error.

Here is my code

<widgets-bms-scoreboard>
    <div class="1">
        <div class="wrapper">
            <div class="header">
                <div class="dropdown">
                    <div class="dropdown-arrow"> </div>
                </div>  
            </div>
        </div>
    </div>  
</widgets-bms-scoreboard>

Answer

From comments, shadow DOM is present. You can access elements within it either by adding this to cypress.json

{
  "includeShadowDom": true
}

or in the test

cy.get('widgets-bms-scoreboard')
  .shadow()
  .find('.dropdown-arrow').click()