Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including disconnected with all npm packages installed. Try it out:

var disconnected = require("disconnected")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

disconnected v0.1.6

Enables `connected` and `disconnected` element's listeners.


In less than 0.5K, it enables connected and disconnected element's listeners in hyperHTML, but it can also be used with any other library/vanilla JS.

The only optional dependencies it has are constructable Event and the WeakSet. Both must be passed along as configuration object, and polyfills might be needed only for legacy browsers.

// requires both modern Event and WeakSet
import disconnected from 'disconnected';
const observe = disconnected({Event, WeakSet});

mainElement.addEventListener('connected', () => {
  console.log('I am alive ;-)');
mainElement.addEventListener('disconnected', () => {
  console.log('but now I am out O_O');



Even IE9, as long as a usable Event and WeakSet are provided.

What about attributechanged ?

You got it, sharing same API, needing same Event poly, if necessary.

DOM Level 0 Like events ?

Using with-level-0 would make it possible to have el.onconnected = ... simplification too.


// remember to observe the node
var div = observe(document.createElement('div'));

// add your Level 0 listener
div.onconnected = function () {
  div.textContent = 'Level 0';

// that's it!

// feel free to clean it up via
div.onconnected = null;
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free