[html]pc / mobile 구분

pc 화면 뷰와 mobile 화면 뷰 

표시 구성상 변경, 구별이 필요할때

<somsom-ad>
    <template class="ad__mobile">
    	//mobile view
    </template>
    <template class="ad__desktop">
    	//desktop view
    </template>
</somsom-ad>

mobile view, desktop view 작성

각 장치별 화면 확인

<script>
class AdComponent extends HTMLElement {
  connectedCallback() {
    const isMobile = matchMedia('(max-width: 500px)').matches;    
    const ad = document.currentScript.closest('.ad');
    const content = this
      .querySelector(isMobile ? '.ad__mobile' : '.ad__desktop')
      .content;
    
    this.appendChild(document.importNode(content, true));
  }
}

customElements.define('somsom-ad', AdComponent);
</script>