source-element

A Web Component for conditionally loading scripts based on user-specific conditions.

This is inspired by the Picture and Video elements, and wondering what possibilities we could enable by allowing the browser to determine what JavaScript files to load.

• We could load translation files only in the user's language.
• We could load a simpler site for users requesting reduced data or reduced motion, and a complex Three.js site for everyone else.

As a Web Component, this is still happening after the page loads – but if this was moved into the browser, we could see even more speed and data improvements.

Demo

Examples

Media Query

Load separate JavaScript files based on any media query match, in this case light/dark theme preference.

<script type="module" src="source-element.js"></script>

<source-element>
  <script-source
    src="scripts/dark.js"
    when="(prefers-color-scheme: dark)"
  ></script-source>
  <script-source
    src="scripts/light.js"
    when="(prefers-color-scheme: light)"
  ></script-source>
</source-element>

Language

Load just the needed translations with the lang attribute. This looks to see if an exact match is present in navigator.languages.

<script type="module" src="source-element.js"></script>

<source-element>
  <script-source src="scripts/es.js" lang="es"></script-source>
  <script-source src="scripts/de.js" lang="de"></script-source>
  <script-source src="scripts/en.js" lang="en"></script-source>
</source-element>

Fallback

Ideally, we would have a script element that would be used as a fallback if the SourceElement component fails to load. However, it does not seem possible to have a script element in the DOM without loading the script.

For now, you can set a default by not adding any conditions. Because elements are checked in the order they appear in the DOM, this must be last.

<script type="module" src="source-element.js"></script>

<source-element>
  <script-source src="scripts/es.js" lang="es"></script-source>
  <script-source src="scripts/de.js" lang="de"></script-source>
  <script-source src="scripts/en.js"></script-source>
</source-element>

Installation

You have a few options (choose one of these):

1. Install via npm: npm install @oddbird/source-element NOT AVAILABLE YET
2. Download the source manually from GitHub into your project.
3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use) NOT AVAILABLE YET

Usage

Make sure you include the <script> in your project:

<!-- Host yourself -->
<script type="module" src="source-element.js"></script>

Next steps

• Figure out fallback using <script>.
• Better script insertion, using the attributes from the script-source element.
• Propose a native, non-Web Component for inclusion in browsers.

Credit

With thanks to the following people:

• Zach Leatherman for the conditional inspiration in is-land.
• David Darnes for the Component Template.

Support

At OddBird, we enjoy collaborating and contributing as part of an open web community. But those contributions take time and effort. If you're interested in supporting our open-source work, consider becoming a GitHub sponsor, or contributing to our Open Collective.