Celo

This is a loader script for web components that were written down in HTML, as they should be!
The _Custom Element LOader_, or Celo, listens for changes in DOM and when it detects a custom element being added, it fetches its markup and inserts it in the document.

How do I use it?

Celo will autoload web components for you if your follow the rules:
+ Import celo either as an ES6 module or a simple script.
+ Your components should be in the folder "/components" (or any single folder set in the configuration).
+ Your components' names must be lowercase and match the tags intended. So the "\" component will be loaded from the file "my-example.html".

And how does it work?

Celo uses a MutationObserver to listen for any element inserted in the DOM that carries a hyphen (ie. a custom element). Upon detection, if it hasn't done so already, it fetches the markup and add its code to a hidden \

with an id of "\_celo" (also configurable).

Requirements

Celo has no dependencies, but the non-minified version assumes ES6.

Setting up

Celo comes in two flavours: you can import it as an ES6 Module or as a simple script. In either way, Celo is an iife. It will execute automatically, won't pollute your global namespace and though it returns the Mutation Observer, but you most likely don't need to keep a reference to it.

The difference is that importing a script will block the HTML parser, while ES6 Modules are deferred by default, allowing your page to show the appearance quick ans then (quite quickly) load the interactivity. That is a great idea.

But Celo is the kind of thing you'd _want_ to block the parser! As an ES6 Module, Celo will only be fired after the DOM is parsed, so it'll loop through all elements in your page and reinsert custom elements to be reparsed. Yikes! That means your page _will_ blink without the components, before inserting them half a second later.

Importing it directly as a script would do the opposite, loading Celo and the components as they are needed, so your page is loaded in one go. The delay is usually minor, and there's no blink. This is currently the preferred method for loading Celo (even is modules do usually rock!).

$3


In case you want a fallback, you can run the minified ES5 version with a _nomodule_ attribute:

$3

or

``The script version is transpiled to work under ES5.

`Useful information`

`$3`


Methods of loading celo have changed slightly in recent version. Make sure to check the set up if you run into any troubles.
$3

You don't need to configure anything - the defaults are most likely fine.
But if you want to, you can set the path of the folder your components are in, and the id of the \

 that will contain the templates. You do that by creating a global variable named "_celoConfig_" that can contain either or both of these properties: "componentsPath" and "containerId". The example below shows a simple way to configure Celo, but be sure to do it in a separate \


$3

Each web component should be its own HTML file. If you want multiple components in a single HTML, make sure it's one main component and its _subcomponents_. Basically a subcomponent is:
+ dynamically added by the main component;
+ not suitable to be added as a standalone component; and
+ not intended to be reused by other main components.
If you add the subcomponent tag directly to your HTML, Celo will try to load it from a file matching its tagName, resulting in a non-fatal error.
$3

Any top level \