>I am working on a project where I initialize some DOM elements with data- attributes and control their visibility in response to a form input change event. It would be nice to somehow run the visibility check in more of a declarative/reactive manner without having to commit to writing my templates with a front end framework and build tooling.

Here is an approach you can use:

    const name = 'check-if';
    const aState = name + '-state';

    run();

    function run() {
        document.querySelectorAll('[' + name + ']')
            .forEach(update);
        setTimeout(run, 50);
    }

    function update(target) {
        let selector = target.getAttribute(name);
        let matchedSomething = document.querySelector(selector) !== null;

        if (target.getAttribute(aState) !== matchedSomething.toString()) { //only update when change is necessary
            target.setAttribute(aState, matchedSomething);
        }
    }

Usage:

  <style>
  [check-if-state="false"].conditionally-visible{ display: none; }
  </style>
  <div check-if="#input:valid" class="conditionally-visible"></div>

This exact code can be used for any styling based on any CSS query. It only allows one rule per tag, but in practice it's usually sufficient. In case you need multiple rules, you can wrap the original tag in another one. You can use data- attributes instead of customs, which will simplify the library somewhat at the expense of HTML readability.

You can use the same approach for enabling/disabling inputs.

If you need more fine-grained information to act upon, you simply write another library that adds it to DOM.