InDom is a library I’ve had in mind for years. When arrow functions arrived, I imagined writing `$('.example').onClick(n => n.addClass('on'))` with clear APIs like `$1` for querySelector and `$a` for querySelectorAll. Finally, with widespread support for private class methods, I was able to build InDom around two core principles: single instance per DOM element and automatic cleanup of events and data. Core features of InDom:

- Chainable and lightweight (3.8 KB gzipped)

- Stack Agnostic: If you set an event with InDom and then remove the DOM element by any means (an older JS DOM library, a large JS framework, etc.), cleanup still happens automatically. This allows gradual adoption of InDom at any pace.

- ES2022 with Plain JavaScript, ES modules, and TypeScript distribution formats.

A few code examples:

  // hover highlight on every #menu>div 
  const menuDivs = $a('#menu>div');
  menuDivs.onEnter(n => n.addClass('on'));
  // In the above, n is each InDom object
  menuDivs.onLeave(n => n.removeClass('on'));

  // prevent the first .example>a from navigating
  $1('.example>a').onClick((n, e) => {
      e.preventDefault();
      console.log(`navigation blocked for URL: ${n.getAttr('href')}`);
  });

  // get the first .sign-up-section
  const section = $1('.sign-up-section');
  // harvest all field values inside it
  const o = $v(section);          
  // { name: 'Alice', interests: ['JavaScript','clean code'], … }
  if (!o.interests.includes('clean code')) {
    $1('.error', section)
      .setHtml(`${o.name}, please select "clean code" to continue`)
      .addClass('on');
  }

I hope InDom adds to the JS ecosystem, and I’m looking forward to your feedback.

You can view InDom on GitHub: https://github.com/constcallid/indom