WebComponents 添加元素到侧边栏

Question

我即将学习 vanilla js web 组件。我可以成功渲染一些由 webcomponents 生成的元素，现在我想给它一些设计并将它放在侧边栏中。但是我不确定这是 webcomponents 还是设计问题，添加侧边栏后元素将不再显示。

也许你可以看看我的代码并给我一些提示，我在哪里引起了问题？

@编辑：正如评论中所建议的那样，我已将其放在 fiddle 中，因此您可以尝试一下。现在我对这种行为的理解更少了，然后在 fiddle 中它看起来应该很好，但在我的本地机器上却不是。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DiceArea</title>
    </head>
    <body>
    
    <script  type="module" src="./index.js"></script>
    </body>
    </html>

    window.addEventListener('load', () => {
        getUsers();
    });

    function getUsers() {
        const users = ["player1", "player2", "player3", "player4", "player5"];
        const nav = document.createElement("player-nav");
        nav.setAttribute("class", "sidenav")
        document.body.appendChild(nav);
    
        users.forEach(user => {
            user = document.createElement('table-user');
            nav.appendChild(user);
    
            user.addEventListener("click", () => {
                alert("lol")
            })
        })
    }

    class User extends HTMLElement {
        constructor() {
            super();
            this.shadow = this.attachShadow({mode: 'open'});
        }
    
        connectedCallback() {
            this.user();
        }
    
        user() {
            this.shadow.innerHTML = ` 
            <style>
            .sidenav {
                height: 100px;
                width: 100px;
                position: fixed;
                background-color: #0000;
                overflow-x: hidden;
                padding-top: 20px;
            }
            .avatar {
                width: 90px;
                height: 90px;
                border-radius: 10%;
            }
            </style>
           <img src="html/aavatar.png" alt="Avatar" class="avatar">`
   }
}

customElements.define("table-user", User);

https://jsfiddle.net/9bt8Lk0v/8/

这就是它在我的本地机器上的样子：

Answer 1

乍一看，我看到了 2 个可能的问题：

您正在做 .createElement('player-nav') 但从未定义该自定义元素
你正在做nav.appendChild()
IF nav 是一个元素 with shadowDOM, 你必须做 nav.shadowRoot.appendChild() 因为原始元素内容现在是 'lightDOM'
参见：

你的代码还是很traditional/oldskoolDOM操控的。

我将你的 JSFiddle 变成了一个（快速）示例，展示了一些你可以玩的 Web 组件概念：https://jsfiddle.net/CustomElementsExamples/sg7rcm3a/

<template id=TABLE-PLAYERS>
  <style>
    :host {
      display: block;
      background: grey;
      --clickedColor: green;
    }
  </style>
  <h3>Players</h3>
</template>

<template id=PLAYER-NAV>
  <style>
    :host {
      display: block;
      background: lightgreen;
    }

    * {
      float: left
    }
    :host(.clicked){
      background:var(--clickedColor);
    }
    .name{
      font-size:2em;
    }
  </style>

  <slot name=avatar></slot>

  <div>
        <slot class=name name=username></slot>
  </div>

</template>

<table-players id=Players></table-players>

JSFiddle 中的完整工作代码：https://jsfiddle.net/CustomElementsExamples/sg7rcm3a/

WebComponents 添加元素到侧边栏

WebComponents add elements to sidebar

html

javascript

css

web-component