Definí mi componente en "component.js" así:
class LeftSideMenu extends HTMLElement { connectedCallBack() { this.innerHTML = ` ---my HTML codes--- ` } } customElements.define("left-side-menu", LeftSideMenu);Pero cuando trato de usar mi componente en la página HTML, no muestra mi componente.
en la etiqueta principal:
<script src="component.js"></script>en cuerpo:
<left-side-menu></left-side-menu>¿Qué está mal? En otro proyecto, escribí exactamente así y funcionó.
EDITAR: HTML completo:
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Admin Panel</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Start Left menu area --> <left-side-menu></left-side-menu> <!-- End Left menu area --> <div> Header div </div> <div> Page div </div> <!-- scripts --> <script src="component.js"></script> </body> </html>connectedCallBack está mal escrito, la b tiene que estar en minúsculas:
conectadoDevolución de llamada