Shadow Dom 无法读取未定义的属性“样式”答案

【问题标题】：Shadow Dom Cannot read property 'style' of undefinedShadow Dom 无法读取未定义的属性“样式”
【发布时间】：2021-02-10 11:52:28
【问题描述】：

我正在创建一个带有 shadow dom 的组件，但我在控制台中出现错误“无法读取未定义的属性'样式'”这是我在 php 中的 HTML 代码我的问题是我不知道如何获取运行图像幻灯片功能的 javascript 代码。如果我在它运行的脚本中放置一个警报，那么代码就会运行。但我无法访问 style 属性。

```
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Avisos</title>        
    </head>

    <body>
        <aviso-dos>A</aviso-dos>
        <aviso-dos>B</aviso-dos>
        <aviso-dos>C</aviso-dos>

        <template id="plantilla">
            <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

            <style>
                .item {
                    width: 288px;
                    height: 192px;
                    border-style: solid;
                    border-width: 1px;
                    border-color: DarkGray;
                }

                #iconos{ 
                    display: none;
                }

                #aviso:hover #iconos{
                    display : block;
                    background:rgba(255, 255, 255, 0.75);
                }      

                .slide {
                    display: none;
                }
            </style>

            <div id="aviso" class="item w3-display-container">
                <div id="iconos" class="w3-display-middle w3-display-container w3-animate-opacity" style="width:100%; height:100%">
                    <div class="w3-display-topleft" id="arrIzq" style="width:44px; height:auto; display: flex; flex-flow: column; align-content: space-between">
                        <div class="w3-dropdown-hover w3-hover-green" style="background-color: transparent">
                            <img src="varios/bars-solid.svg" style="width:24px; height:24px; margin:10px">   
                            <div class="w3-dropdown-content w3-bar-block w3-border">
                                <a href="#" class="w3-bar-item w3-button">Link 1</a>
                                <a href="#" class="w3-bar-item w3-button">Link 2</a>
                                <a href="#" class="w3-bar-item w3-button">Link 3</a>
                            </div>
                        </div>
                    </div>
                    <div class="w3-display-topmiddle" id="arrMed" style="width:auto; height:44px; display: flex; flex-flow: row; align-content: space-between">
                        <img src="varios/crown-solid.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                        <img src="varios/crown-solid.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                        <img src="varios/crown-solid.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                    </div>
                    <div class="w3-display-topright" id="arrDer" style="width:44px; height:auto; display: flex; flex-flow: column; align-content: space-between">                
                        <img src="varios/check-circle-regular.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                    </div>
                    <div class="w3-display-bottomleft" id="abaIzq" style="width:auto; height:44px; display: flex; flex-flow: row; align-content: space-between">
                        <img src="varios/circle-solid.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                        <img src="varios/comment-alt-regular.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                    </div>
                    <div class="w3-display-middle" id="abaMed" style="width:auto; height:44px; display: flex; flex-flow: row; align-content: spcae-between">
                        <img src="varios/star-solid.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                        <img src="varios/star-solid.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                        <img src="varios/star-solid.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                        <img src="varios/star-solid.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                        <img src="varios/star-solid.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                    </div>
                    <div class="w3-display-bottomright" id="abaDer" style="width:auto; height:44px; display: flex; flex-flow: row; align-content: space-between">
                        <img src="varios/thumbs-up-regular.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                        <img src="varios/star-solid.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                        <img src="varios/bell-solid.svg" style="width:24px; height:24px; margin:10px; cursor:pointer">
                    </div>
                </div>
                <!--<div id="slide">
                    <img src="imagenes/gonzaloRuiz_prueba2_6_288x192.jpg">
                </div>-->
                <div style="width:100%; height:100%; overflow:hidden">                    
                    <img class="slide" src="imagenes/carrasquera_prueba2_2_288x192.jpg" style="width:100%; height:100%">
                    <img class="slide" src="imagenes/gonzaloRuiz_prueba2_6_288x192.jpg" style="width:100%; height:100%">
                    <img class="slide" src="imagenes/higueritas_prueba6_288x192.jpg" style="width:100%; height:100%">
                    <img class="slide" src="imagenes/sanAntonio_prueba11_288x192.jpg" style="width:100%; height:100%">
                    <img class="slide" src="imagenes/siberia_prueba4_288x192.jpg" style="width:100%; height:100%">
                </div>
            </div>

            <script>
                var myIndex = 0;

                carousel();

                function carousel() {
                    var i;
                    var x = document.getElementsByClassName("slide");

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

                    myIndex++;

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


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

                    setTimeout(carousel, 2500);    
                }     
            </script>
        </template>

        <script src="aviso2.js"></script>
    </body>
</html>


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);

【问题讨论】：

脚本在 HTML 模板中，但它不允许我访问样式属性。
createElement('script') 并从 shadow dom javascript 添加脚本也不起作用

标签： javascript html css dom shadow

【解决方案1】：

当这行 x[myIndex-1].style.display = "block";被执行时，x.length等于0，因为节点还不存在于DOM中。

创建自定义元素后尝试添加轮播脚本：

aviso2.js

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

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

【讨论】：

嗨，感谢您的回复，我收到此错误 carousel.js:20 Uncaught TypeError: Cannot read property 'style' of undefined at carousel (carousel.js:20) at carousel.js:3跨度>

【解决方案2】：

我继续在其他论坛上进行调查，最后我找到了从一侧和另一侧获取信息的解决方案。希望以后对你有帮助。

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);

【讨论】：