Un componente web con HTML diferente para escritorio y móvil

Christian Schaefer tiene un gran artículo sobre cómo lidiar con los anuncios web. Todo es interesante: primero documenta todos los desafíos que presentan los anuncios y luego presenta soluciones modernas para cada uno de ellos.

Un fragmento de código que me llamó la atención fue una forma sencilla de diseñar un componente que representa HTML diferente según el tamaño de la pantalla.

div  template    // Mobile ad HTML code with inline script  /template  template    // 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 

Inteligente. Aunque tenga en cuenta que Christian termina tomando un camino totalmente diferente en el artículo.

Aquí está el mismo código donde uso un elemento personalizado y muevo JavaScript a JavaScript simplemente porque.