从Web组件内部访问html标记

debugcn 发表于 Dev

伊万

我正在学习js Web组件的第一个概念。我非常喜欢这些内容，并尝试举一个简单的例子。我的组件只是一个假装将颜色更改为div的按钮。

我的示例工作是我所期望的，但是我注意到，如果我尝试更改的元素位于Web组件中而不是Web组件之外，那么我的方法并不是太多的“组件方式”。

这是我的html文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="main">
      <h1>Yeah Web Components!</h1>
      <my-component></my-component>
    </div>

    <script src="myComponent.js"></script>
  </body>
</html>

这是我的组件.js：

const template = `
  <style>
    .container{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .box{
        width: 100px;
        height: 100px;
        background: red;
    }
    .hi-button{
      margin-top: 10px;
    }
    
  </style>
  <div class="container">
    <div class="box"></div>
    <button class="hi-button">Change</button>
  </div>
 
`;

class MyFirstTest extends HTMLElement{
  constructor(){
    super()
    const shadowRoot = this.attachShadow({ mode: 'open' }); 
    shadowRoot.innerHTML = template; 
  }

  changeButtonColor(){
      const box = this.shadowRoot.querySelector(".box");
      if(box.style.background === 'red'){
        box.style.background = 'blue';
      }else{
        box.style.background = 'red';
      }
  }

  connectedCallback(){
      const event = this.shadowRoot.querySelector(".hi-button");
      event.addEventListener('click', () => this.changeButtonColor());
  }

  disabledCallback(){
    const event = this.shadowRoot.querySelector(".button-test");
    event.removeEventListener();
  }

}

customElements.define('my-component', MyFirstTest);

正如我所说的，该功能可以正常工作，但我不希望div位于Web组件中，而将html文件和mi组件仅作为按钮。

例如，我的html文件将如下所示：

.......

  <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="main">
      <h1>Yeah Web Components!</h1>
      <div class="my-div-to-change"></div>
      <my-component></my-component>
    </div>
  </body>

.......

Web组件是否可以这种方式工作？

维护组件之间独立性的最佳方法是使用events。

Web组件调度一个由父容器侦听的事件。然后，父母做必要的动作。

如果您想在组件和父组件之间“直接”对话，则该系统耦合度很高，不是一个好方法。当然可以，不推荐使用bur。

您可以检查该答案是否更清楚。

另外，使用事件回答您的问题。就这么简单：

首先，必须以这种方式将事件分派到组件中：

this.dispatchEvent(new CustomEvent("button-clicked", { 
    bubbles: true,
}));

您可以在这里检查此用法。

此外，家长将使用以下方法收听：

document.addEventListener("button-clicked", changeColor);

因此，单击按钮时，父级将changeColor使用所需的内部逻辑触发功能。

这样，您正在使用Web组件对父容器执行操作，但系统未耦合。父母可以没有孩子工作，孩子可以没有父母的工作。两者都可以单独使用。当然，该事件不会被分派或侦听，但是组件之间没有依赖关系。

这也是一个例子。

const template = `

  <div class="container">

    <button class="hi-button">Change</button>
  </div>
 
`;

class MyFirstTest extends HTMLElement{
  constructor(){
    super()
    const shadowRoot = this.attachShadow({ mode: 'open' }); 
    shadowRoot.innerHTML = template; 
  }

  changeButtonColor(){
      //Call parent
      this.dispatchEvent(new CustomEvent("button-clicked", { 
            bubbles: true,
        }));
  }

  connectedCallback(){
      const event = this.shadowRoot.querySelector(".hi-button");
      event.addEventListener('click', () => this.changeButtonColor());
  }

  disabledCallback(){
    const event = this.shadowRoot.querySelector(".button-test");
    event.removeEventListener();
  }

}

customElements.define('my-component', MyFirstTest);

<!DOCTYPE html>
<html lang="en">
  <head>
   <style>
    .container{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .box{
        width: 100px;
        height: 100px;
        background: red;
    }
    .hi-button{
      margin-top: 10px;
    }
    
  </style>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="main">
      <h1>Yeah Web Components!</h1>
      <div class="box"></div>
      <my-component></my-component>
    </div>

    <script src="myComponent.js"></script>
    <script>
    //Add listener to do the action
    document.addEventListener("button-clicked", changeColor);
    function changeColor(){
      var box = document.querySelector(".box");
      if(box.style.backgroundColor === 'red'){
        box.style.backgroundColor = 'blue';
      }else{
        box.style.backgroundColor = 'red';
      }
    }
    </script>
  </body>
</html>