Christian Schaefer has a great big write-up about dealing with web advertisements. The whole thing is interesting, first documenting all the challenges that ads present, and then presenting modern solutions to each of them.
One code snippet that caught my eye was a simple way to design a component that renders different HTML depending on the screen size.
<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. Although note that Christian ends up going a totally different route in the article.
Here’s that same code where I use a custom element and move the JavaScript to JavaScript just ‘cuz.
See the Pen
A Web Component with Different HTML for Desktop and Mobile by Chris Coyier (@chriscoyier)
on CodePen.
Wouldn’t using slots be a better and more webcomponent-y solution? I.e. slot=”mobile” and slot=”desktop” with some css that does display: none based on media queries?
I dunno! Demo me!
For different HTML on desktop and mobile ** with SSR sites ** e.g. Gatsby – be sure to check out Fresnel at @artsy/fresnel. Checks all the boxes. Worked a charm for me.