Query selector that selects all elements including those in ShadowDOM

example.js

document.body.querySelectorAll('.button') // only buttons not in shadow dom

$query('.button') // all .button including those in shadow dom

shadowQuerySelectorAll.js

$query = (query) => _query(query, document.body)

_childNodesDeep = parent => {
    return [...parent.childNodes].map(child => [child, ..._childNodesDeep(child)]).flat()
}

_shadowsDeep = parent => {
    return _childNodesDeep(parent)
        .map(c => c.shadowRoot)
        .filter(s => s)
        .map(s => [s, ..._shadowsDeep(s)])
        .flat()
}

_query = (query, parent, matches = []) => {

    if (!parent) return

    matches = parent.querySelectorAll(query)
    
    
    shadows = _shadowsDeep(parent)
    

    matches = [...matches, ...shadows.map(s => Array.from(s.querySelectorAll(query)))].filter(m => m.length).flat()

    

    return matches
}