cdcd

<radio-mock-component></radio-mock-component>

<script>
class RadioMockComponent extends HTMLElement {
constructor() {
super();
// Shadow DOM を使わない例
this.innerHTML = `
<label>
<input type="radio" name="choice" value="A" /> 選択 A
</label>
<label>
<input type="radio" name="choice" value="B" /> 選択 B
</label>
<label>
<input type="radio" name="choice" value="C" /> 選択 C
</label>

    <!-- MOCK DIVたち -->
    <div class="mock" data-mock="A" style="display:none;">MOCK A の内容</div>
    <div class="mock" data-mock="B" style="display:none;">MOCK B の内容</div>
    <div class="mock" data-mock="C" style="display:none;">MOCK C の内容</div>
  `;
}

connectedCallback() {
  this.querySelectorAll('input[type="radio"]').forEach(radio => {
    radio.addEventListener('click', (e) => {
      const selectedValue = e.target.value;

      // すべての mock div を非表示に
      this.querySelectorAll('.mock').forEach(div => {
        div.style.display = 'none';
      });

      // 対応する mock div を表示
      const targetDiv = this.querySelector(`.mock[data-mock="${selectedValue}"]`);
      if (targetDiv) {
        targetDiv.style.display = 'block';
      }
    });
  });
}

}

customElements.define('radio-mock-component', RadioMockComponent);
</script>