This content originally appeared on Go Make Things and was authored by Go Make Things
Over the last year, I’ve converted all of my code bases over from traditional DOM manipulation or JS-rendered UI to mostly pre-rendered HTML and Web Components.
Today, I wanted to quickly show you how I automatically load the JS for my Web Components only on the pages where they’re used.
Let’s dig in!
The dynamic ES import() method
The import() method works like the import operator, but runs dynamically as a function. That means that you can run it conditionally.
In my code, I check to see if the custom element for my Web Component is present using the Element.querySelector() method. If it is, I can import() the script that power it.
if (document.querySelector('simple-toc')) {
import('/path/to/simple-toc.js');
}
Because Web Components are self-instantiating, I don’t need to bother with waiting for the script to load, deconstructing specific methods, and running initialization scripts.
I can import it as a side-effects only module and get on with my day!
Quick aside: if you want to learn more about ES imports, side-effects only modules, or Web Components, join the Lean Web Club for free today.
This is a great general use solution, but I have another method I prefer even more.
Shortcode detection in Hugo
My personal projects are all powered by Hugo, a static site generator.
Hugo has the ability to check if a shortcode has been used on the current page, and render content in response.
I use shortcodes for all of my Web Components, like this…
{{<simple-toc heading="On this page...">}}
Then, in my footer, I can check if a shortcode is used and load the corresponding JavaScript file…
{{- if .HasShortcode "simple-toc" -}}
<script src="/path/to/simple-toc.js"></script>
{{- end -}}I like this approach a little better because it reduces a bit of the loading lag.
To make it even more performant, I actually use Hugo’s readFile command to inline the JS instead of loading it externally.
🎉 Preorder Getting Sh!t Done today and get 40% off! Be more productive, get more done, and feel more in-control of your work and life. Click here to learn more.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2024-09-17T14:30:00+00:00) How to dynamically load Web Components. Retrieved from https://www.scien.cx/2024/09/17/how-to-dynamically-load-web-components/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.