Why i can manipulate the DOM in Tabs but i can't in Pages

1

I have two examples, one using routes with tabs like this:

tabs: [
    {
        path: '/',
        id: 'tab',
        componentUrl: './tab.html'
    } 
]

inside tab.html

.....
    tabMounted: function (tab) {  
        tab.srcElement.querySelectorAll('.myclass').forEach(function(e) {
            // anything 
        }
    }
.....

but i can’t do that with pages

{
    name: 'page',
    path: '/page',
    componentUrl: './page.html'
}

inside page.html

.....
    pageMounted: function (page) {  
        // i can't do this
        page.srcElement.querySelectorAll('.myclass').forEach(function(e) {
            // anything 
        }
    }
.....

the two templates are almost the same except one is tab and the other one is a page, so why in the tab example i can access tab.srcElement and manipulate it, and i can’t do the same in the other example?
And what’s the best way to search in the DOM and manipulated it? i don’t want to search inside the whole app DOM, just the loaded page DOM like the first example (tab)