个人中心
gpt4 book ai didi

javascript - WebComponents 将元素添加到侧边栏

转载 作者：行者123 更新时间：2023-12-02 21:07:20 24 4
gpt4 key购买 nike

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

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

@编辑:正如评论中所建议的，我已将其放在 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/

这就是它在我的本地计算机上的样子: enter image description here

最佳答案

乍一看，我发现两个可能的问题:

  • 您正在执行 .createElement('player-nav') 但从未定义该自定义元素

  • 您正在执行nav.appendChild()
    IF nav 是一个 with ShadowDOM 元素，你必须执行 nav.shadowRoot.appendChild() 因为原来元素内容现在是“lightDOM”
    请参阅:Difference between Light DOM and Shadow DOM

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

我将您的 JSFiddle 简化为一个(快速)示例，展示了您可以使用的一些 Web 组件概念:

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

关于javascript - WebComponents 将元素添加到侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61192308/

24 4 0
文章推荐： javascript - Eclipse:多次运行 JavaScript 程序以使其正常工作
文章推荐： javascript - 处理从子级到父级的 onClick() 方法 (React)
文章推荐： javascript - 如何获取 jQuery.get "Data"中的特定元素
文章推荐： javascript - 如何使用 vue.js 添加动态引导类？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com