Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
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.
Celo will autoload web components for you if your follow the rules:
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 <div> with an id of "_celo" (also configurable). Any custom element already parsed when Celo is called in is reinserted into the DOM so they can be reparsed.
Celo has no dependencies, but the non-minified version assumes ES6.
Celo comes in two flavours: the preferred one is as an EcmaScript 6 Module, but you can also just import it as a simple script. Either way, Celo is an iife. It will execute automatically, won't pollute your global namespace and it does returns the Mutation Observer, but you most likely don't need to keep a reference to it.
<script type="module">
import '/celo.mjs'
</script>
In case you want a fallback, you can run the minified ES5 version with a nomodule attribute:
<script nomodule src="/celo.min.js"></script>
<script src="/celo.min.js"></script>
Prior to version 1.1.0, Celo was not an ES6 Module. If you are updating from it, be sure to double check the setup.
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 <div> 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 <script> tag and use "var" instead or let or const.
<script>var celoConfig = { containerId: "_customId" }</script>
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:
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.
Any top level <script> tags in your component's HTML file will be executed right away. But <script> tags inside <template> tags are (typically) not. That's because web components (typically) use the cloneNode() function, which flags the scripts as "already executed". Please note that:
Below you will find how a "simple-example.html" file could look like (it's not the "right" way to do it, but it's a way that works). Basically, you've got two top level tags: a <template> and a <script>. All the markup goes into the <template>, including any <style>, and it's best to avoid adding extra <script> tags inside <template>.
<template id="tpl-simple-example">
<div>
<p>This is a demo web component.</p>
</div>
<style>
p{
padding: 5px 10px;
background-color: antiquewhite;
}
</style>
</template>
<script>
class SimpleExample extends HTMLElement{
constructor(){
super()
const el = document.querySelector("#tpl-simple-example")
.content.cloneNode(true)
this.attachShadow({mode:'open'}).appendChild( el )
}
}
customElements.define( 'simple-example',SimpleExample )
</script>
FAQs
A loader for HTML-based web components.
The npm package celo receives a total of 5 weekly downloads. As such, celo popularity was classified as not popular.
We found that celo demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.