HTML Custom Elements Supported in Character Sheets?

Hi, I'm helping a friend who has a pro account tweak on the custom character sheets for our game, and I'm a former front-end developer who is looking at some patterns in the sheets and thinking they could really benefit from using custom elements instead of repeating a lot of boilerplate HTML for various "rows of things" or other re-used areas on the sheet. Being that I'm not our GM, and I don't have a pro account, I'm testing in a little local dev webserver to test, and can't see what does and does not work in JS in the platform, so I thought I would ask here. In terms of supported JS - I see that we can't do much with the DOM - does that mean things like inflating templates for custom elements is off limits too?  Is the JS on the browser level even supported through the security filter? Sorry if this is obvious or I didn't see a place in the docs that covered this (I looked, I promise :) ) - hence my ask here. Thanks!

Hi BigCat, roll20 is a "unique" environment. DOM is really not accessible.  You must rely on html/css to manipulate the sheet and chat output can be done using roll templates . JS/sheetworkers are limited to sheet attribute access only. If you haven't done so already, I would suggest reading through Building Character Sheets on the wiki.  You really need to access the sheet on roll20(custom sheet or the preferred method via the sheet sandbox) to see how a given sheet is actually handled by the vtt. Cheers

As Vince said, developing a R20 character sheet really isn't possible without access to the R20 Sheet tools. There's just too much stuff that is not standard web development (and in some cases probably goes against basic best practices). I'll add a few things to Vince's excellent advice. We can do some limited client-side class addition/removal using a VERY limited implementation of jQuery (we can add/remove classes, and listen for ~4 kinds of events). For rows of things, if it's an area that's going to be dynamic, then repeating sections are what you want to use. That said, I'd really recommend looking into the PUG templating engine to generate the HTML. It removes a ton of the repetitiveness. Hope that helps, and good luck!

Thanks! I saw that the DOM wasn't very accessible, but I hadn't been able to see if there were exceptions (I probably just missed the ones you mentioned). Thanks for the templating mention - that would be really helpful, and for whatever reason I hadn't thought of using pre-processing tools! I appreciate that. Our GM has a dev background, but not frontend/HTML/CSS type stuff, so I'm trying to keep it to HTML/CSS/JS mostly, but I'll talk to him about tooling to make his (and mine by extension while I help him) life easier!