My simple custom JavaScript component not working in HTML?-CodePudding

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

CodePudding user response：

connectedCallBack is written wrong, the b has to be lowercase:

connectedCallback