Add global wc-fallback script and styles

[anselmbradford]

This PR adds the architecture to handle fallback content relatively gracefully. It aims to provide a workflow for addressing the states of: JS disabled, JS enabled + no web component support, JS enabled + web component support. The architecture is as follows:

Given the component my-custom-btn. It wraps a fallback, and as needed, slotted content:

<my-custom-btn>
  <!-- author-supplied no-js fallback -->
  <noscript>
    <button>Click this basic button!</button>
  </noscript>

  <!-- author supplied slotted content -->
  Click this fancy button!
</my-custom-btn>

---

JS disabled
The <noscript> content is rendered AND the author supplied slotted content is rendered. So it looks like this:

<button>Click this basic button!</button>
Click this fancy button!

To fix this, we can provide CSS that hide everything but the <noscript> tag, however we can't generically target all web components in CSS:

my-custom-btn > :not(noscript) { display: none; }

To make this more generic, we could have the author add a <noscript> tag and, also, if they want to hide other content in the component, add a boolean attribute hasfallback or similar. Then we can make the selector more generic:

[hasfallback] > :not(noscript) { display: none; }

---

JS enabled, web components not supported

In this case, we can globally check if web components are supported, and if not, we can load a polyfill, or just let it fall back to the <noscript> content. However, the problem here is that if JS is enabled, but web components are not supported, then the <noscript> content will not show. So, in this case we need to use JavaScript to turn <noscript> inside the web component into <div class="fallback"> or similar. This would now show that content, except non-noscript tags are hidden via the CSS, so we need to add more CSS to show .fallback classes:

[hasfallback] > .fallback { display: block; }

// wc-fallback.js (see files added)

---

JS enabled, web components are supported

If JS is enabled, the <noscript> content is hidden and it is not swapped with <div class="fallback"> and then the web component uses the author-supplied slotted content to render. However, because of the existing CSS that hides everything but the noscript content, that means everything will be hidden. So in this case, we add another CSS rule:

[hasfallback]:defined > :not(noscript) { display: block; }

Additions

• Add global wc-fallback script and styles

Testing

1. PR checks should pass.

[itsmedavep]

Ans and I discussed, the approach makes sense. Reviewed the code and it looks fine to me.Approved.