0

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>
3

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.