this.querySelector || this.getElementsByClassName not working in LWC OSS

Question

I am creating an application on LWC OSS. As Lightning Toasts are not available on LWC OSS, I am trying to create a notification component that can show the notifications. I am just trying to run the annimations, but not able to get the elements so I can add the CSS files. Here are the HTML & JS Code...

JAVASCRIPT:

import { LightningElement, api } from 'lwc';
import { getConstants, query, insert, checkUser } from 'backend/system';

export default class toast extends LightningElement {
    connectedCallback() {
        this.hideBanners();
        // Ensure animation plays even if the same alert type is triggered.
        requestAnimationFrame(() => {
            const banner = this.querySelector('.banner.error');
            banner.classList.add('visible');
        });
    }
    hideBanners(event) {
        this.querySelectorAll('.banner.visible').forEach((banner) => banner.classList.remove('visible'));
    }
}

HTML:

<template>
    <div class="banners-container">
        <div class="banners">
            <div class="banner error">
                <div class="banner-icon"></div>
                <div class="banner-message">Oops! Something went wrong!</div>
                <div class="banner-close" onclick={hideBanners}></div>
            </div>
            <div class="banner success">
                <div class="banner-icon"></div>
                <div class="banner-message">Everything was fine!</div>
                <div class="banner-close" onclick={hideBanners}></div>
            </div>
            <div class="banner info">
                <div class="banner-icon"></div>
                <div class="banner-message">Here is some useful information</div>
                <div class="banner-close" onclick={hideBanners}></div>
            </div>
        </div>
    </div>
</template>

Answer 1

As described in Access Elements the Component Owns you should use the template property e.g.:

const banner = this.template.querySelector('.banner.error');