Shadow Root getElementsByClassName

Question

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)}" >&#10094;</a>
        <a class="next" @click="${this.plusSlides(1)}">&#10095;</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);

Jarboe

Answer 1

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

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

Instead you should use querySelectorAll().

It's the same behavior for:

• getElementsByTagName()
• getElementsByClassName()

Note 1

getElementById() is not available on (in memory) nodes created with document.createElement

Test Selector Methods: https://jsfiddle.net/WebComponents/9yrtn8vb/

Note 2

Be aware slotted content is not moved to shadowDOM, it remains in ligthDOM

When you move Elements from lightDOM (in main DOM) to shadowRoot,
the Live Nodelist will be emptied

let pieces = document.getElementsByTagName("[TAGNAME here]");
console.warn(tags);// lists all tags
this.shadowRoot.append(...this.children);
console.warn(tags);// empty

Galore

I changed it to var slides = this.shadowRoot.querySelectorAll(".mySlides"); but when I log it I have an empty list. That causes me to get an error: Cannot read property 'style' of undefined when I try to access the style property of the slides. – Jarboe

Oh, i see, I am immediately invoking the click event by writing: @click="${this.plusSlides(-1)}" in the render method. I changed it to @click="${(e) => { this.plusSlides(-1); }}" and changed getElementByClassName() with querySelectorAll() and now it works great! – Jarboe

Answer 2

LitElement also offers its own convenient decorators to access nodes: @query, @queryAll, and @queryAsync decorators

But for sure I understand if you want to stay vanilla :)

Diphyodont