When JS/Web Components are enabled and the link is clicked, the tab does not open, and the click is instead handled by lite-youtube, resulting in a youtube embed.If Web Components/JavaScript are not available on the site, the onclick is ignored, and links as expected, I do this by checking if customElements is supported in the browser.There is an by default, this will open the youtube video in a new tabĮxplaining the onclick: Whats happening here is.background-image server from youtube CDN.There's a couple of things going on above: Lite-youtube-embed from Paul Irish, is the perfect fit here. The second part of this is identifying a component to use to embed the YouTube player, I wasn't going to re-invent the wheel here. A caption for the video, important for accessibility.An image thumbnail to be used for the link to wrap.A link which when clicked navigates to the video.To embed a YouTube video via progressive enhancement, you first need to identify what is the minimal HTML-only implementation of the content, this is: Here are a couple of uses cases I had for progressively enhanced content, using JavaScript. Progressive enhancement web component use cases All content should be available without JavaScript/Web Components available, but where they are available, the content should be progressively enhanced. In this article I'll explain how I went about setting up a development environment for Web Components, as well as simple production optimizations.īut first, I want to discuss the approach that i've taken for consuming web components in this site. Eleventy and web components go really, really well together.- Justin Fagnani January 2, 2020

Devexpress component