Javascript 阴影Dom无法读取属性'；风格'；未定义的
我正在用shadowdom创建一个组件，但控制台中出现错误“无法读取未定义的属性‘style’”。这是我在php中的HTML代码 我的问题是，我不知道如何获取javascript代码来运行图像幻灯片功能。 如果我在它运行的脚本中放入警报，那么代码就会运行。 但我无法访问style属性Javascript 阴影Dom无法读取属性'；风格'；未定义的,javascript,html,css,dom,shadow,Javascript,Html,Css,Dom,Shadow,我正在用shadowdom创建一个组件，但控制台中出现错误“无法读取未定义的属性‘style’”。这是我在php中的HTML代码 我的问题是，我不知道如何获取javascript代码来运行图像幻灯片功能。 如果我在它运行的脚本中放入警报，那么代码就会运行。 但我无法访问style属性 ``` <!DOCTYPE html> <html lang="es"> <head> <meta charset="
```
<!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>
当此行
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);
我继续在其他论坛进行调查，最终我从一方和另一方获取信息，找到了解决方案。我希望这对你将来有所帮助
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();
}
类扩展HtmleElement{
构造函数（）{
超级（）；
this.attachShadow（{mode:'open'}）；
const template=document.getElementById（“plantilla”）；
this.shadowRoot.appendChild（template.content.cloneNode（true））；
this.myIndex=0；
this.x=this.shadowRoot.queryselectoral（“.slide”）；
}
普鲁巴（）
{
这个.prueba2（）；
}
普鲁巴2（）{
var i；
对于（i=0；ithis.x.length）{
this.myIndex=1
}
this.x[this.myIndex-1].style.display=“block”；
设置超时（（）=>{
这个.prueba2（）；
}，this.getAttribute（'tiempo'）；
}
connectedCallback（）{
这是prueba（）；
}
}
window.customElements.define（'aviso-dos'，aviso2） 脚本位于HTML模板内，但它不允许我访问样式属性。createElement（“脚本”）和从shadow dom javascript添加脚本也不起作用。感谢您的回复，我收到以下错误：carousel.js:20 Uncaught TypeError:无法读取carousel（carousel.js:20）上未定义的属性“Style”在旋转木马。js:3
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();
}