Question

我将要学习Vanilla js Web组件。我可以成功渲染由webcomponents生成的某些元素，现在我想给它一些设计并将其放在侧边栏中。但是，我不确定这是Web组件还是仅仅是设计问题，添加侧边栏后元素将不会显示出来。

也许您可以看一下我的代码并给我一些提示，指出导致问题的原因？

@编辑：正如评论中所建议的，我已经将它放在小提琴中，因此您可以尝试一下。现在，我对行为的理解甚至更少了，然后摆弄它看起来应该是应该的，而在我的本地计算机上却不是。

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

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

您正在做.createElement('player-nav')，但从未定义该自定义元素
您正在做nav.appendChild()
如果 nav是具有 shadowDOM的元素，则必须执行nav.shadowRoot.appendChild()，因为原始元素的内容现在是'lightDOM'
参见：Difference between Light DOM and Shadow DOM

您的代码仍然是非常传统/过时的DOM操作。

我将您的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将元素添加到侧边栏

1 个答案: