Eine Web Component mit unterschiedlichem HTML für Desktop und Mobil

Christian Schaefer hat einen großen Beitrag zur Bewältigung von Web-Werbung. Das Ganze ist interessant, da es zunächst alle Herausforderungen dokumentiert, die Werbung mit sich bringt, und dann moderne Lösungen für jede einzelne davon präsentiert.

Ein Code-Snippet, das meine Aufmerksamkeit erregte, war eine einfache Möglichkeit, eine Komponente zu entwerfen, die je nach Bildschirmgröße unterschiedliches HTML rendert.

<div class="ad">
  <template class="ad__mobile">
    // Mobile ad HTML code with inline script
  </template>
  <template class="ad__desktop">
    // Desktop ad HTML code with inline script
  </template>
  <script>
    const isMobile = matchMedia('(max-device-width: 20em)').matches;
    const ad = document.currentScript.closest('.ad');
    const content = ad
      .querySelector(isMobile ? '.ad__mobile' : '.ad__desktop')
      .content;
    
    ad.appendChild(document.importNode(content, true));
  </script>
</div> 

Clever. Obwohl man bedenken muss, dass Christian in dem Artikel einen ganz anderen Weg einschlägt.

Hier ist derselbe Code, bei dem ich ein benutzerdefiniertes Element verwende und den JavaScript-Code in eine separate JavaScript-Datei verschiebe, nur so.

Siehe den Pen
Eine Web Component mit unterschiedlichem HTML für Desktop und Mobile von Chris Coyier (@chriscoyier)
auf CodePen.