Nsryjdtyk

I am using LitElement to create custom Web Components. I am fairly new at it and decided to try making image slideshow. I used W3Schools slideshow as reference
while modifying it to work as LitElement.
The problem is, that when I am trying to use document.getElementByClassName I am not getting anything. I am familiar with this issue since I am working with Shadow DOM so I changed it to this.shadowRoot.getElementsByClassName. Unfortunately, I get told that what I am trying to use is not a function. How Do I get elements by class name when I am working with LitElement and shadow dom? In case you want to see how my component looks like, here is the code:

import { LitElement, html} from '@polymer/lit-element';



class ImageGalleryElement extends LitElement {



static get properties() { return {

    slideIndex: { type: Number },

  }};



constructor(){

    super();



    this.slideIndex=1;

    this.showSlides(this.slideIndex);

}



// Next/previous controls

plusSlides(n) {

    this.showSlides(this.slideIndex += n);

}



// Thumbnail image controls

currentSlide(n) {

    this.showSlides(this.slideIndex = n);

}



showSlides(n) {

    var i;

    console.dir(this.shadowRoot);

    var slides = this.shadowRoot.getElementsByClassName("mySlides");

    console.dir(slides);

    var dots = this.shadowRoot.getElementsByClassName("dot");

    if (n > slides.length) {this.slideIndex = 1} 

    if (n < 1) {this.slideIndex = slides.length}

    for (i = 0; i < slides.length; i++) {

        slides[i].style.display = "none"; 

    }

    for (i = 0; i < dots.length; i++) {

        dots[i].className = dots[i].className.replace(" active", "");

    }

    slides[this.slideIndex-1].style.display = "block"; 

    dots[this.slideIndex-1].className += " active";

}





render(){

return html`

    <style>

        * {box-sizing:border-box}



        /* Slideshow container */

        .slideshow-container {

            max-width: 1000px;

            position: relative;

            margin: auto;

        }



        /* Hide the images by default */

        .mySlides {

            display: none;

        }



        /* Next & previous buttons */

        .prev, .next {

            cursor: pointer;

            position: absolute;

            top: 50%;

            width: auto;

            margin-top: -22px;

            padding: 16px;

            color: white;

            font-weight: bold;

            font-size: 18px;

            transition: 0.6s ease;

            border-radius: 0 3px 3px 0;

            user-select: none;

        }



        /* Position the "next button" to the right */

        .next {

            right: 0;

            border-radius: 3px 0 0 3px;

        }



        /* On hover, add a black background color with a little bit see-through */

        .prev:hover, .next:hover {

            background-color: rgba(0,0,0,0.8);

        }



        /* Caption text */

        .text {

            color: #f2f2f2;

            font-size: 15px;

            padding: 8px 12px;

            position: absolute;

            bottom: 8px;

            width: 100%;

            text-align: center;

        }



        /* Number text (1/3 etc) */

        .numbertext {

            color: #f2f2f2;

            font-size: 12px;

            padding: 8px 12px;

            position: absolute;

            top: 0;

        }



        /* The dots/bullets/indicators */

        .dot {

            cursor: pointer;

            height: 15px;

            width: 15px;

            margin: 0 2px;

            background-color: #bbb;

            border-radius: 50%;

            display: inline-block;

            transition: background-color 0.6s ease;

        }



        .active, .dot:hover {

            background-color: #717171;

        }



        /* Fading animation */

        .fade {

            -webkit-animation-name: fade;

            -webkit-animation-duration: 1.5s;

            animation-name: fade;

            animation-duration: 1.5s;

        }



        @-webkit-keyframes fade {

            from {opacity: .4} 

            to {opacity: 1}

        }



        @keyframes fade {

            from {opacity: .4} 

            to {opacity: 1}

        }

    </style>

    <!-- Slideshow container -->

    <div class="slideshow-container">



        <!-- Full-width images with number and caption text -->

        <div class="mySlides fade">

            <div class="numbertext">1 / 3</div>

            <img src="../../img/img-snow-wide" style="width:100%">

            <div class="text">Caption Text</div>

        </div>



        <div class="mySlides fade">

            <div class="numbertext">2 / 3</div>

            <img src="../../img/img-nature-wide" style="width:100%">

            <div class="text">Caption Two</div>

        </div>



        <div class="mySlides fade">

            <div class="numbertext">3 / 3</div>

            <img src="../../img/img-mountains-wide" style="width:100%">

            <div class="text">Caption Three</div>

        </div>



        <!-- Next and previous buttons -->

        <a class="prev" @click="${this.plusSlides(-1)}" >❮</a>

        <a class="next" @click="${this.plusSlides(1)}">❯</a>

    </div>

    <br>



    <!-- The dots/circles -->

    <div style="text-align:center">

        <span class="dot" @click="${this.currentSlide(1)}"></span> 

        <span class="dot" @click="${this.currentSlide(2)}"></span> 

        <span class="dot" @click="${this.currentSlide(3)}"></span> 

    </div>

`;

}

} 

// Register the element with the browser

customElements.define('image-gallery-element', ImageGalleryElement);

The getElementsByClassName() method works only on a HTML Document or element.

The shadowRoot is a Document Fragment, not a Document nor a HTML element.

Instead you should use querySelectorAll().