AtomAttr relies on two key browser technologies: the MutationObserver API and the CSS Object Model (CSSOM). Together, they allow us to detect changes in your HTML structure and inject styles instantly, without ever touching the file system.
The Observer
When your page loads, AtomAttr attaches a MutationObserver to the document body. This listens for any new nodes being added (like from React or an AJAX call) or any attribute changes on existing nodes. This ensures that even in dynamic applications, your styles are always up to date.
The Compiler
Once an attribute is detected, the engine parses it into a CSS rule. Instead of writing this rule to a `<style>` tag as text (which forces a slow layout recalculation), we use `sheet.insertRule()`. This modifies the browser's internal style sheet directly, resulting in 60fps performance.