While working on a component using shadow DOM, I encountered the following error in the console: "Cannot read property 'style' of undefined". This issue seems to be related to my HTML code in PHP. The main challenge I am facing is figuring out how to execute the JavaScript code responsible for enabling the image slideshow functionality. Interestingly, when I include an alert in the script, it successfully runs, indicating that the code is functional. However, I am unable to access the style property.
html
<!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%">
<!-- Add your image and icon elements here -->
</div>
<!-- Add your slideshow images here -->
</div>
<script>
// Add your slideshow script here
</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() {
// Always call super first in the constructor
super();
this.attachShadow({mode: 'open'});
this.template = document.getElementById("plantilla");
this.shadowRoot.appendChild(this.template.content.cloneNode(true));
}
connectedCallback(){
// Implement any additional logic here
}
}
customElements.define('aviso-dos', aviso2);