Lazy loading
Use import() to lazy-load a script
The way of kata
Kata is an exercise for muscle memory. It's not intended to fill your brain with information but train your fingers to react. The information is there to give you the why, but your fingers need to learn the how.
The material on this page is presented in a specific order — from least specific to highly technical. You will learn the most by jumping in as soon as you have some idea of what you should do. Once you're done, read the rest of the material and check your solution.
All katas are designed to be doable without using 3rd party libraries (and, in fact, the point is to also learn how to do what these libraries do).
To make the best of katas, observe the following rules.
- Don't rush.
- When stuck, take a break and do something unrelated.
- Do not copy/paste code. Always retype everything.
- Do not use AI tools to generate code.
- Try to do something that wasn't in the instructions, experiment.
- Repeat the kata from time to time, even if you think you've got it.
- You have mastered the kata once you are able to complete it without thinking too much.
Remember, the goal is not to get it done, but to get some practice.
Introduction
In this exercise, you will practice lazy-loading scripts (and related resources).
Skills you will acquire
- Lazy-loading scripts using
import() - Lazy-loading CSS
Objective
- Using the provided HTML file, define the custom element for the
<x-time>tag when user interacts with the button - Lazy-load the CSS related to the widget
Check your solution
- When "Show time" is clicked, the
<x-time>widget shows a time - The
<x-time>widget is styled using a stylesheet that is loaded along with the script - Once the script is loaded, the button is hidden
Materials
Keep in mind
There are two ways to load the stylesheet along with the script. You can either
load it as part of the script (i.e., bundle it) as a variable holding the CSS as
a template literal, or you can create a new <link> tag that points to the CSS.
When using the CSS string, you can create a <style> tag in the <head>
element, and then put the string into that tag.
Also consider how you can load the script independently of the CSS. For
example, you could store the CSS as a separate stylesheet file and create a
<link> right after or before calling import(). Check the network tab and
observe any differences from the bundling method. Think about what you gain
and lose by using this method over bundling.
You should think about how you could handle errors (e.g., when there is a typo
in the script URL or network is down). You can simulate load errors by putting
the network into offline mode in the developer tools once the page loads. You
want error handling to tell you what to fix (if any), and let the user know if
there's anything they can do (e.g., add some text into the <x-time> that
tells them the network is down).