WebComponents добавить элементы в боковую панель - PullRequest
Новая
       18

WebComponents добавить элементы в боковую панель

0 голосов
/ 13 апреля 2020

Я собираюсь изучать ванильные js веб-компоненты. Я мог бы успешно визуализировать некоторые элементы, сгенерированные веб-компонентами, теперь я хотел бы придать ему некоторый дизайн и поместить его в боковую панель. Однако я не уверен, является ли это веб-компонентами или просто проблемой дизайна, после добавления боковой панели элементы больше не будут отображаться.

Может быть, вы могли бы взглянуть на мой код и дать мне несколько советов, где я нахожусь вызывая проблему?

@ Редактировать: Как предложено в комментарии, я поместил его в скрипку, так что вы можете попробовать. Теперь я еще меньше понимаю поведение, тогда как в скрипке оно выглядит так, как должно, а на моей локальной машине нет. 

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

1 Ответ

1 голос
/ 14 апреля 2020

На первый взгляд я вижу 2 возможных проблемы:

  • Вы делаете .createElement('player-nav'), но никогда не определяли этот пользовательский элемент

  • Вы выполнение nav.appendChild()
    IF nav является элементом с shadowDOM, вам нужно выполнить nav.shadowRoot.appendChild(), потому что исходное содержимое элемента теперь 'lightDOM'
    см. : Разница между Light DOM и Shadow DOM

Ваш код все еще очень традиционный / oldskool DOM манипулирование.

Я разделил ваш JSFiddle на ( быстрый пример, показывающий некоторые концепции веб-компонентов, с которыми можно поиграть: 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/

...