使用自定义 HTML 元素模板化页眉和页脚

问题描述 投票：0回答：2

我试图在我的所有网页上显示相同的标题（菜单）。 youtube 有一个关于此的视频。 （与上面的标题相同）。 但我似乎无法让它继续下去。 参考我的代码（mainmenu.js），如果我尝试将部分包含在 this.innerHTML 之后，我的 VS Code 会出现错误显示。

这可能是问题所在吗？为什么VS代码显示错误？ 索引.html 

!DOCTYPE html>
<html lang="en">
<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>Login</title>
</head>
<body>
    <div class="center">
        <h1 align="center">Please Login  </h1>
        <form action='mainpage.html'  method="post">
            <!-- <label for="useremail">Email :</label>
            <input type='email' id='useremail' name='useremail'><br></br>
            <label for="userpw">Password :</label>
            <input type='password' id='userpw' name='userpw'>
            <br><br> -->
            <table align="center">
                <tr>
                    <td>
                        <input type="email" placeholder ='Email Address' name='' autofocus size="30" required>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type='password' placeholder ='Password' name='' size = "30" required>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type='submit' value = 'Login' size="30">
                        <input type='submit' value ='Forget' width='30'>
                    </td>
                </tr>
            </table>
        </form>
    </div>    
</body>
</html>

主页.html

<!DOCTYPE html>
<html lang="en">
<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>Main Page</title>
<!--<link rel="stylesheet" href="style.css"> -->

<script type=module scr=mainmenu.js></script>

<mainheader></mainheader>



</html>

mainmenu.js

class mainmenu extends HTMLElement {
    connectedCallback() {
        this.innerHTML = 
        <h1>
        test
        </h1>
        
        
        // <header>
        //     <nav>
        //     <ul>
        //         <li><a href="#">Lists</a></li>
        //         <li><a href="#">Sales</a></li>
        //         <li><a href="#">Purchases</a></li>
        //         <li><a href="#">Received</a></li>
        //         <li><a href="#">Payments</a></li>
        //         <li><a href="#">Adjustments</a></li>
        //         <li><a href="#">Reports</a></li>  
        //     </ul>
        //     </nav>
        // </header>       
            }
}

customElements.define('mainheader',mainmenu)

javascript html custom-element
2个回答
0
投票

这就是你想做的事情

class MyHeader extends HTMLElement {
    connectedCallback() {
        this.innerHTML = 
        `
        <header>
             <nav>
             <ul>
                <li><a href="#">Lists</a></li>
                <li><a href="#">Sales</a></li>
                <li><a href="#">Purchases</a></li>
                <li><a href="#">Received</a></li>
                <li><a href="#">Payments</a></li>
                <li><a href="#">Adjustments</a></li>
                <li><a href="#">Reports</a></li>  
             </ul>
             </nav>
         </header>
    `
    }
}
customElements.define('my-header', MyHeader)
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    </head>
<body>
    <my-header></my-header>
</body>
</html>

0
投票

认为需要在类之后放入constructor()。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.