I defined my component in "component.js" like this:
class LeftSideMenu extends HTMLElement {
connectedCallBack() {
this.innerHTML =
`
---my HTML codes---
`
}
}
customElements.define("left-side-menu", LeftSideMenu);
But when I try to use my component in HTML page, it doesn't show my component.
in head tag:
<script src="component.js"></script>
in body:
<left-side-menu></left-side-menu>
What is wrong? In another project, I wrote exactly like this and it had worked.
EDIT: Whole HTML:
<!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 is written wrong, the b has to be lowercase:
connectedCallback