Currently, I'm building an Application that generates from a JSON File, CSS selectors, and styles. I'm currently Attempting to get all styles affecting an element, I have a solution currently which is not good. Currently, every one of my selectors sets the same custom variable with inheriting false, to its id, then I loop through the element and remove depending on what the id is that variable from the id until it's empty again, then I add them back to each CSS selector and use the array I've got.

This solution is bad since it's forcing a lot of reflows when I remove the variable and it scales linearly, but also it's getting slower and slower as more children the element has.

I could get All affecting elements at launch by just looping each selector with query selector, but when I add an element after it started up it would be way too expensive to run query selector for each CSS selector for each element I add and compare them.

Another solution might be writing a reverse algorithm but with that one, it would be extremely complicated due to the sheer complexity of all selectors like nth-child, first, element, by attribute, etc.-

Any thoughts?