我只是发现Web组件，我不确定它是否能很好地理解它。
但这是我的问题。似乎它有很多优点。我想知道是否有可能在几个影子主机上共享相同的影子DOM？
我想要的是我网页上的一个元素的几个实例。 如果更新（单个）影子DOM，则所有实例都将自动更新。
它是shadow DOM内容的用途之一;我怎样才能实现它？
谢谢 ！
通过使包含组件在属性更改时侦听事件并将值传递给子组件，可以实现相同的效果。这样您就不会共享影子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>