javascript - HTMLElement 触发另一个 HTMLElement 中的函数

Question

我在课堂上有一个汉堡按钮和一个菜单HTMLElement。

当屏幕宽度小于 912 像素时，菜单向左平移 100%（屏幕外）并出现汉堡包。当我单击按钮时，菜单会重新出现在屏幕上。

我想将汉堡包和菜单分开到它们自己的HTMLElement类中。这意味着我需要点击汉堡来改变菜单的风格。问题是shadowRoot. 如果不是阴影根，我可以为菜单样式添加一个变换，但这是不可能的。

我怎样才能把这两个班级分开？有没有办法可以HTMLElement从外部HTML文件调用菜单类中的函数？这样，我可以解决 shadowRoot 问题吗？

这是工人阶级的代码：

const myMenuTemplate = document.createElement('template');
myMenuTemplate.innerHTML = `
<style>

  * {
    padding: 0px;
    margin: 0px;
  }

  .my-button {
    margin-left: 16px;
    display: none;
    cursor: pointer;
  }

  .my-button div{
    width: 25px;
    height: 3px;
    background-color: #34515e;
    margin: 5px;
    transition: all 0.3s ease;
  }

  .my-menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 20vw;
    height: 90vh;
    left: 0px;
    bottom: 0px;
  }

  @media screen and (max-width: 912px){

    body{
      overflow-x: hidden;
    }

    .my-button{
      display: block;
    }

    .my-menu{
      transform: translateX(-100%);
    }
  }

  .toggle-button .line1{
    transform: rotate(-45deg) translate(-5px, 0px) scaleX(0.6);
  }

  .toggle-button .line2{
    transform: translate(5px, 0px)
  }

  .toggle-button .line3{
    transform: rotate(45deg) translate(-5px, 0px) scaleX(0.6);
  }

  .toggle-menu {
    transform: translateX(0%);
  }

</style>

<div class="my-button">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

<ul class="my-menu">
  <slot/>
</ul>
`;


class MyMenu extends HTMLElement{
  constructor(){
    super();

    this.attachShadow({ mode: 'open'});
    this.shadowRoot.appendChild(myMenuTemplate.content.cloneNode(true)); 

    const myMenu = this.shadowRoot.querySelector('.my-menu');
    const myButton = this.shadowRoot.querySelector('.my-button');

    myButton.addEventListener('click', () => {
      myButton.classList.toggle('toggle-button');
      myMenu.classList.toggle('toggle-menu');
    });
  }
}

window.customElements.define("my-menu", MyMenu);

标签： javascripthtmlcssweb-component