Consider providing an HTML fallback if JavaScript isn’t available

[simevidas]

Steps to reproduce:

1. Disable JavaScript in your desktop browser (I use uBlock Origin for this)
2. Visit https://www.spicyweb.dev/html-modules-history/

What happened:

The embedded video did not render anything.

What should have happened:

A fallback link to the video on YouTube should have rendered instead of the embedded video.

[simevidas]

In this particular example, I had to enable third-party scripts from four additional domains

• cloudflare.com
• google.com
• jsdelivr.net
• youtube.com

to make the video load. Of course, the exact list of domains depends on the individual website, but at least google.com and youtube.com are probably required in all cases.

Ideally, I should not have to enable third-party scripts to get the link to the video. If an HTML-only fallback isn’t feasible, then the component could at least generate an <a> link with a link to the video. That way, people who allow the website’s own (first-party) JavaScript, but not third-party scripts, would get that link.

[simevidas]

Here’s an example of what I’m talking about. If JavaScript isn’t available, the embedded Codepen demo falls back to a paragraph with a link to the demo on codepen.io. This HTML is included in Codepen’s embed snippet itself, but as I said, if that’s not feasible, it could be inserted dynamically with a little bit of same-domain JavaScript. That would be better than nothing.

https://ryanmulligan.dev/blog/layout-breakouts/

[jaredcwhite]

@simevidas I think we can close this — I was able to add a link inside the custom element and that renders just fine with JavaScript disabled, but with JS enabled the link is replaced by the YouTube embed. So this was my bad for not adding in the fallback content.

[jaredcwhite]

Maybe the documentation could be updated — I don't see an example of fallback content in the README.

[simevidas]

@jaredcwhite What you implemented on your site is pretty much the ideal fallback. It would be great if this could be the default functionality of the <lite-youtube> component for all users, although I’m not sure how that could be implemented without JavaScript and without forcing websites to add the fallback manually. Maybe there could be a version of the component that is used like this:

<a is="lite-youtube" href="http://youtube.com/watch?v=k85bq5leJPo">

That way, the component would function as a regular link that is then enhanced into an embedded video via JavaScript.

[justinribeiro]

It would be great if this could be the default functionality of the component for all users, although I’m not sure how that could be implemented without JavaScript and without forcing websites to add the fallback manually.

It's basically a "can have my cake and eat it too" scenario; to your point, I'd need JavaScript to make do something, but I don't have JavaScript to do that.

It's an implementor's dilemma; you have to compose something as the fallback as the component can't spin up in that case. On the plus side if you want a JavaScript disabled fallback, HTML has you covered with noscript.

<lite-youtube videoid="guJLfqTFfIw">
  <noscript>View video on <a href="something">Youtube</a></noscript>
</lite-youtube>

Yeah, low tech, but works a treat.

Ideally, I should not have to enable third-party scripts to get the link to the video. If an HTML-only fallback isn’t feasible, then the component could at least generate an link with a link to the video.

I can explore adding that from a javascript-enabled domain blocked perspective. :+1:

The problem with <noscript> is that it doesn’t render if JavaScript is enabled, but one or more scripts fails to load and execute for whatever reason (network error, blocked by browser extension, etc.).

[justinribeiro]

The problem with

No disagreement, but your first case above was "Disable JavaScript in your desktop browser". There is nothing I can do about that, but an user of the component could use of noscript to resolve that issue.

one or more scripts fails to load and execute for whatever reason (network error, blocked by browser extension, etc.)

If it's a dead load (ala, you get no thread execution to enable the lifecycle), it's almost like a no javascript scenario. In that case, again, the user of the component would have to guard against that.

<style>
.fallback {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding: 1rem;
    border: 2px dotted blue;
}
</style>
<lite-youtube videoid="guJLfqTFfIw">
  <a href="" class="fallback">View video on Youtube</a>
</lite-youtube>

Given that there is no slot usage, I've omitted the noscript (since in the no javascript scenario, it'll act the same). You'll not I generic style the link. My reasoning is that if you're using any web component that has a sort of third-party content experience, you're likely to be putting in fallback links in other places.

Given all that, the only scenario I can think of is the false start, where the lifecycle kicks, it has enough to build in the DOM but no video loads. I can work on that. :+1:

[simevidas]

My reasoning is that if you're using any web component that has a sort of third-party content experience, you're likely to be putting in fallback links in other places.

I’ve been browsing the web with JS disabled by default for about one month, and from my experience, on some web pages there is a fallback, and on other web pages there is no fallback (it’s usually just a block of white space, with nothing rendered).

That’s why I think it would be good if the component that embeds content provided the fallback by default. Could <a is="lite-youtube">, as I mentioned above, not work? It would be a regular link to the video on youtube.com that is then enhanced into the embedded video.

That way, the fallback would be on all sites (great for users), and the websites that use the component would not have to do anything extra. It would just work out of the box.

[jaredcwhite]

@simevidas WebKit has intentionally stated it will never support custom element upgrades via is=, so unfortunately that's a no go from a progressive enhancement standpoint. I think the embedded <a> within <lite-youtube> is the best (only?) solution for this.