Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@vonage/element-f
Advanced tools
A functional shim to custom element definition.
npm i @vonage/element-f
In order to define a custom-element, you only need one definition function:
import elementF from "@voange/element-f";
const MyElement = elementF(()=> {
// Your logic goes here
const shadow = this.attachShadow({mode: 'open'});
});
To tap into lifecycle events, this function can use the "life" event emitter:
const MyElement = elementF((life)=> {
const shadow = this.attachShadow({mode: 'open'});
// Listen once to when this component connects to a document
life.once('connect', ()=> shadow.innerHTML = `I'm Alive!`);
});
The "life" event emitter supports three methods:
once(name, fn)
on(name, fn)
- Registers fn
for events of name name
. once()
will invoke fn once.
name
- The name of the event to listen tofn(payload)
- The function to be called when an event occurs
payload
- An object containing information regarding the eventoff(name, fn)
- Removes an event handler previously registered using on or once.The following events are thrown:
connect
- Fired upon connectedCallback
. Delivers no payload.disconnect
- Fired upon disconnectedCallback
. Delivers no payload.attribute
- Fired when an observed attribute changes. Delivers name, previousValue and newValue as payload.To observe attributes, just add their list to elementF
call:
const MyElement = elementF((life)=> {
life.on('attribute', ({ name, previousValue, newValue })=> {
// name can be "one" or "two"
});
}, ["one", "two"]);
To define a custom element using standard class notation, you'd write something like:
class MyButton extends HTMLElement {
constructor(){
super();
console.log(`I'm alive!`);
}
static get observedAttributes(){
return ['disabled'];
}
attributeChangedCallback(name, oldValue, newValue) {
this.classList.toggle('disabled', newValue);
}
connectCallback() {
this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";
}
}
To defining the same element using element-f would look like this:
const MyButton = elementF((life)=> {
life.on('connect', ()=> {
this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";
});
life.on('attribute', ({ name, newValue, oldValue })=> {
this.classList.toggle('disabled', newValue);
});
console.log(`I'm alive!`);
}, ['disabled']);
Element-F supplies a stylistic framework, not a fundamental solution to a problem. If you're happy with OOP-styled constructs, you would probably not draw much enjoyment from using it :)
FAQs
A functional shim to custom element definition
The npm package @vonage/element-f receives a total of 1 weekly downloads. As such, @vonage/element-f popularity was classified as not popular.
We found that @vonage/element-f demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 14 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
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.