If you’re having problems to get an element ID in the editor, you always can do “wwLib.getFrontDocument()” rather than just “document” to be sure to always target the app document (iframe in the editor or the published app).
Let’s connect on Twitter: @victornocode
Small explanation on why it’s like this: while building, your WeWeb app is rendered inside an iframe to not collide with the editor’s JS and styling.
By doing wwLib.getFrontDocument(), you’re essentially saying WeWeb to switch to the iframe’s window 
Great tip thanks for posting!
Any tuturials or documentation that you can refer me too on customizing Weweb with javascript? Or something to better understand how WeWeb is structured? I saw that there was an office hour on creating custom Vue components.
I’m new to WeWeb and it seems much more developer friendly. I’ve worked with Bubble and one of the reasons I’m considering switching is because WeWeb seems to be more developer friendly rather than everything wrapped in a propretary black box. Thanks!
Specifically I’m looking for an understanding of the CSS selectors, and #id’s of elements in the WeWeb ecosystem. I’m sure there is a way to assign id’s and classes to elements, but there is also the possibility of creating clashes with existing WeWeb classes?
You can easily add classes and ids to any element with the settings tab of the element’s side panel that shows up once you select an element.
Of course you are in charge of what you put there.
Classes clashes are not much a problem of the element, rather a problem of css: if you add your own clashing class in a stylesheet that is lower in the cascade it will override the previous declaration. Most of weweb styles are inline anyway, so a class on its own will not be enough specific to override them.
If you inspect the page with the browser dev tools you can easily see what’s being rendered amd check classes and styles.
Thanks for the insight, super helpfull!
No problem 
