How to select an element added to the DOM dynamically?
By the way, when I use the web browser developer tool to select the button itself with the mouse, I get the ::after pseudo element of the element and not the element itself; maybe that’s the reason that I fail to select that element, so perhaps the true question should be how to select a pseudo element of a dynamically created element?
So if your web console’s Elements tab looks like that picture, and you go to your console, and type in document.querySelector(".Button__contentWrapper--11-4-12"), you get null? And you’re putting in the double underscore and double hyphen?
As mentioned in the other thread, since that button is part of a shadow dom, you cannot query it directly like this, You have to first query the shadow host, then query it’s dom for the button. For example:
Your code example is the only one that worked for me so far.
Please help me to understand it.
There are wrappers before 'div[data-spotim-module]' so why did you choose this particular wrapper? Because it’s the first wrapper under the #shadow-root (open) right?
If so then I guess that a “shadow DOM” should be defined as:
“Everything that comes under a shadow root pseudo element, until the end of that pseudo element”.
They had to choose something above the shadow root to be able to “find” the Shadow root.
I’m guessing they chose div[data-spotim-module] because the thing below it, which for me was ow-hhofdgkepmg, looks like its a string of random letters that probably gets randomized at some interval, where the div should remain a div with a spotim-module data point.
Because they had selected the div, and are assuming that the name of that element under the div is a random/changing string, so the firstElementChild is how you find that element from its parent, whatever its currently called.
shadowRoot is like firstElementChild. It’s an accessor from the parent (the ow-hho…etc) into a ‘child’ (in this case, a pseudoelement child property).
Once you’ve gotten the top node you want to search from, querySelector operates within that scope. querySelector will search within that element.