Question

我只是发现Web组件，还不确定是否对它有所了解。

但这是我的问题。似乎有很多优点。我想知道是否可以在多个影子主机上共享相同的影子DOM？

我想要的是网页上某个元素的几个实例。
如果（单个）影子DOM更新，那么所有实例也会自动更新。

它是影子DOM东西的用途之一吗？以及如何实现呢？

谢谢！

Answer 1

您可以通过具有一个包含组件来实现相同的效果，该组件在属性更改时侦听事件并将其值传递给子组件。这样，您就不会共享影子DOM实例本身，但是无需重复代码即可重复使用该组件。

class XContainer extends HTMLElement {
  constructor() {
    super();
    
    this.total = 0;
  }
  
  connectedCallback() {    
    this.addEventListener('x-increment', this.onIncrement);
    
    this.onIncrement = this.onIncrement.bind(this);
  }
  
  onIncrement(event) {
    this.total = this.total + event.detail.amount;
    
    this.querySelectorAll('x-counter').forEach((counterEl) => {
      counterEl.total = this.total;
    });
  }
}
customElements.define('x-container', XContainer);


class XControls extends HTMLElement {
  constructor() {
    super();
    
    this.attachShadow({ mode: 'open' });
    
    this.shadowRoot.innerHTML = `
      <button>+</button>
    `;
  }
    
  connectedCallback() {    
    this.shadowRoot.querySelector('button').addEventListener('click', this.onClick);
    
    this.onClick = this.onClick.bind(this);
  }
  
  onClick(event) {
    this.dispatchEvent(new CustomEvent('x-increment', {
      bubbles: true,
      composed: true,
      detail: {
        amount: 1,
      }
    }));
  }
}
customElements.define('x-controls', XControls);


class XCounter extends HTMLElement {
  constructor() {
    super();
  
    this.attachShadow({ mode: 'open' });
    
    this.shadowRoot.innerHTML = `
      <h2>Total: <span>0</span>
    `;
  }
  
  set total(value) {
    this.shadowRoot.querySelector('span').innerText = value;
  }
}
customElements.define('x-counter', XCounter);

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Web Component 101</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>  
  <body>

    <x-container>
      <x-counter></x-counter>
      <hr>
      <x-counter></x-counter>
      <hr>
      <x-controls></x-controls>
    </x-container>
    
  </body>
</html>

在多个影子主机之间共享相同的影子DOM？

1 个答案: