我的简单自定义 JavaScript 组件在 HTML 中不起作用？

Question

我在“component.js”中这样定义我的组件：

class LeftSideMenu extends HTMLElement {
    connectedCallBack() {
        this.innerHTML =
        `
        ---my HTML codes---
        `
    }
}
customElements.define("left-side-menu", LeftSideMenu);

但是当我尝试在 HTML 页面中使用我的组件时，它没有显示我的组件。

在头标签中：

<script src="component.js"></script>

正文中：

<left-side-menu></left-side-menu>

怎么了？在另一个项目中，我正是这样写的，并且成功了。

编辑：整个 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>

Answer 1

connectedCallBack 写错了，b 必须小写：

connectedCallback

我的简单自定义 JavaScript 组件在 HTML 中不起作用？

My simple custom JavaScript component not working in HTML?

javascript

html

components