如何在Javascript中更新所有自定义元素实例的值?

Question

我开始在Javascript中使用Web组件。我有一个名为VariantSelects的类，我希望每个实例具有相同的值。所以当实例A发生变化时，实例B应该接收到相同的值。我怎么做呢?

为了表示的目的，我最小化了我的代码。函数的实际数量要复杂得多。

<!-- instance A -->
<variant-selects></variant-selects>
<!-- instance B -->
<variant-selects></variant-selects>

class VariantSelects extends HTMLElement {
constructor() {
super();
this.currentVariant = null;
this.addEventListener('change', this.onVariantChange);
this.init();
}
init() {
// do stuff
}
onVariantChange() {
// should be updated in all instances
this.currentVariant = 123;
}
}
customElements.define('variant-selects', VariantSelects);

提前感谢!

Answer 1

我想我明白了，虽然这可能不是最好的解决方案…

const allVariantRadios = document.querySelectorAll('variant-radios');
Array.from(allVariantRadios).forEach(radio => {
radio.addEventListener('change', updateAllInstances)
});
function updateAllInstances(e) {
allVariantRadios.forEach(instance => {
instance.querySelector(`input[value="${e.target.value}"]`).checked = true;
instance.onVariantChange();
});
}