Shadow Dom Cannot read property 'style' of undefined

Question

I am creating a component with shadow dom but I have the error in the console "Cannot read property 'style' of undefined" this is my HTML code in php My problem is that I don't know how to get the javascript code that gives the image slideshow functionality to run. If I put an alert in the script it runs, so the code runs. But I can't access the style property.


AND THIS IS MY JAVASCRIPT
My problem is that I don't know how to get the javascript code that gives the image slideshow functionality to run.
If I put an alert in the script it runs, so the code runs.
But I can't access the style property.

    ```
    class aviso2 extends HTMLElement {
    
        constructor() {
            // Siempre llamar primero a super en el constructor
            super();
    
            this.attachShadow({mode: 'open'});
    
            this.template = document.getElementById("plantilla");
    
            this.shadowRoot.appendChild(this.template.content.cloneNode(true));
        }
    
        connectedCallback(){
            
        }
    }
    
    customElements.define('aviso-dos', aviso2);

user_14349808 · Answer

When this line x[myIndex-1].style.display = "block"; is executed, x.length is equal 0 because the nodes don't exist in the DOM yet.

Try to add the carousel script after creating the custom element:

aviso2.js

 window.customElements.define("aviso-dos", aviso2);

 const script = document.createElement("script");
 script.src = "carousel.js";
 document.body.appendChild(script);

user_15182929 · Answer

I continued investigating in other forums and in the end I was able to find the solution obtaining information from one side and the other. I hope it helps you in the future.

class aviso2 extends HTMLElement { 
constructor() {
    super();
    
    this.attachShadow({mode: 'open'});

    const template = document.getElementById("plantilla");

    this.shadowRoot.appendChild(template.content.cloneNode(true));

    this.myIndex = 0;
    this.x = this.shadowRoot.querySelectorAll(".slide");
}

prueba()
{
    this.prueba2();
}

prueba2(){
    var i;
    
    for (i = 0; i < this.x.length; i++) {
        this.x[i].style.display = "none";  
    }

    this.myIndex++;

    if (this.myIndex > this.x.length) {
        this.myIndex = 1
    }    

    this.x[this.myIndex-1].style.display = "block";  

    setTimeout(() => {
        this.prueba2();
    }, this.getAttribute('tiempo'));
}

connectedCallback() {
    this.prueba();
}

}

window.customElements.define('aviso-dos', aviso2);

Shadow Dom Cannot read property 'style' of undefined

2 Answers