Web 组件未出现在 html 文件中

Question

我正在尝试使用 Web 组件创建导航栏。我创建了一个名为 navbar.js 的文件，其中的代码是：

navTemplate = document.createElement('template');

navTemplate.innerHTML = `
    <style>
    nav {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:  #0a0a23;
    }

    ul li {
    list-style: none;
    display: inline;
    }

    a {
    font-weight: 700;
    margin: 0 25px;
    color: #fff;
    text-decoration: none;
    }

    a:hover {
    padding-bottom: 5px;
    box-shadow: inset 0 -2px 0 0 #fff;
    }
    </style>
    <header>
    <nav>
    <ul>
        <li><a href="work.html">Work</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
    </nav>
    </header>
    `;

class Navbar extends HTMLElement {
constructor() {
    super();
    this.root = this.attachShadow({ mode: 'open' });
    this.root.appendChild(navTemplate.content);
}} customElements.define('my-navbar', Navbar);

我调用此代码使用 my-navbar 在正文中，脚本 src="components/navbar.js" 在头部，因为我的 .js 文件位于 components 文件夹中。但是我的导航栏没有显示。是 innerHTML 中的问题吗？构造函数？为什么没有出现？

Answer 1

好消息是组件本身正在运行 - 当我们在 HTML 文件中内联代码时，我们可以按预期使用 my-navbar 标记。所以问题可能出在您加载文件的方式上。此外，按照建议使用 components\navbar.js 文件并将其加载到 html 文件中（在头部、正文开头或正文末尾），我们还能够加载和使用组件。

因此请检查您的 html 文件并在 DevTools 中验证 JS 是否已正确加载。

Web 组件未出现在 html 文件中

Web component not appearing in html file

html

javascript

constructor

innerhtml

web-component