A lightweight custom-element-like hook for use with existing frameworks.
zoll strives to be spec compatible where possible. For the implementation details please refer to custom elements spec
# NPM
npm install zoll
# Bower
bower install zoll
You can also include it directly on the webpage
<script type="text/javascript" src="./dist/zoll.min.js"></script>
Let's assume we want to create a custom element . The end goal is to use them directly on the page like this
<profile-picture url="./image.png"> </profile-picture>
To do this, we need to define the element
// since `custom-element-hook` doesn't actually alter any prototypes it's
// necessary to specify utility functions as free-standing and pass the node
// to them
function updateBg(node, url) {
node.style.cssText = `background: url(${zoll.getAttribute(node, 'url')}); width: 200px; height: 200px;`;
}
// Defining the element in the custom element registry
zoll.define('profile-picture', {
observedAttributes: ['url'],
connectedCallback: function() {
if (this.hasAttribute('url')) {
updateBg(this, this.getAttribute('url'));
}
},
disconnectedCallback: function() {
console.log('disconnected');
},
attributeChangedCallback: function(attrName, oldValue, newValue) {
if (attrName === 'url') {
updateBg(this, newValue);
}
}
});
// creating and adding it to the DOM
const pic = zoll.create('profile-picture', {
url: 'image.png'
});
zoll.appendChild(document.body, pic);
zoll.setAttribute(pic, 'url', 'image2.png');
zoll.remove(pic);
//output - disconnected
Lets create a custom button element <custom-button> by extending it from default <button>.
<custom-button>Click Me!</custom-button>
zoll.define('custom-button', {
extends: 'button',
connectedCallback: function() {
this.onclick = function(){
console.log('Button Clicked');
};
},
disconnectedCallback: function() {
console.log('Button Removed');
}
});
const btn = zoll.create('button', {
is : 'custom-button',
value: 'Click Me'
});
zoll.appendChild(document.body, btn);
This allows progressive enhancement of the content in the custom element.
index.html
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript" src="dist/zoll.min.js"></script>
<body>
<profile-picture url="image.png"></profile-picture>
<script src= "main.js"></script>
</body>
main.js
zoll.define('profile-picture', {
// same as first example
});
// upgrade all the elements
zoll.connect(document.body);
once the main.js loads, it will define the <profile-picture> element and the existing <profile-picture> element will be upgraded, applying the custom element's definition (which will set the background image in our case).
Note: The upgrade only apply to the elements in the document tree.
The library exposes a Zoll class where the below methods are defined.
Defines a new custom element with the specified tag name and options.
extends extending a built in element or other custom Element.observedAttributes array of attributes that triggers the attributeChangedCallback on modifications.attributeChangedCallback(attrName, oldValue, newValue) gets called for all the observedAttributes of an element.connectedCallback gets called when the element is inserted in to the document.disconnectedCallback gets called when the element is removed from the document.Simple wrapper around document.createElement, that can also set attributes in a batch without notifying the possible observers.
Simulates the connect process for custom elements in the given subtree calling defined lifecycle callbacks.
Allows to manually notify when the element is inserted in document.
Allows to manually notify when the element's children is inserted in document.
Allows to manually notify when the element is removed in document.
Allows to manually notify when the element's children is inserted in document.
Allows to manually notify an element about the attribute change.
This is useful for some libraries that manipulate DOM under you, like React.
Retrives the element from the CustomElementRegistry if defined.
A proxy for native setAttribute that takes care of the observed attribute notifications.
A proxy for native removeAttribute that takes care of the observed attribute notifications.
A proxy for native hasAttribute.
A proxy for native getAttribute.
A proxy for native appendChild that will notify about nodes connected to the document.
A proxy for native insertBefore that will notify about nodes connected to the document.
Removes the node from it's parent if one exists.
FAQs
A lightweight custom-element-like hook for use with existing frameworks
We found that zoll demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers 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.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.