文章/答案/技术大牛

发布

社区首页 >问答首页 >在几个影子主机之间共享相同的影子DOM？

问在几个影子主机之间共享相同的影子DOM？
EN

Stack Overflow用户

提问于 2019-03-09 22:17:53

回答 1查看 49关注 0票数 0

我只是在探索Web组件，我还不确定是否能很好地理解它。

但我有个问题。看起来它有很多优点。我想知道是否可以在多个卷影主机上共享相同的卷影DOM？

我想要的是一个元素在我的网页上的几个实例。

如果(单个)阴影DOM被更新，所有的实例也会自动更新。

它是影子DOM的用途之一吗?我如何才能实现它？

谢谢！

html

web-component

shadow-dom

回答 1

Stack Overflow用户

发布于 2019-03-12 06:35:44

您可以通过让包含组件在属性更改时侦听事件并将值向下传递子组件来实现相同的效果。通过这种方式，您不会共享影子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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55078252

复制

相似问题

问在几个影子主机之间共享相同的影子DOM？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在几个影子主机之间共享相同的影子DOM？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在几个影子主机之间共享相同的影子DOM？
EN