Change an Illustrator SVG inside Storyline with GSAP

I just did a feature request changing the closed mode to open mode. As there is little plus for Articulate in keeping it closed. And as there are workarounds to access the closed shadow-root as found here.
https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af

and found

they use the #... feature only for clipping in a central "mask-library" - it's not the modern shadow-DOM feature

the firefox debugger does not seem to distinguish between the two

if you use firefox as debugger you can see what happens with the image svg -> #shadow-root

and the inner part of the svg is searchable with javascript

it would be easy to search, if storyline would not modify the id (and class name) from the inner of the svg file

so I have search for an alternative way to find the svg part with javascript

after export from Ilustrator I have injected a searchable wrapper

<g data-...=">

</g>

and with

document.querySelectorAll('[data-...]');

you get

search - tested with firefox and chrome

So basically Storyline uses 

element.attachShadow({ mode: "closed" });

 somewhere when importing the SVG...if they used

element.attachShadow({ mode: "open" });

we could normally edit SVGs ?

with

document.querySelectorAll('[data-mermaid')[0].classList.add("mystyle");

I could modify the DOM tree - it seems possible to write into the 'closed' DOM

... I am searching always the javascript part, where they create the DOM for the svg - they don't use ".attachShadow" ???

Aha :-) So step by step we decrypt Storyline's hidden world :-)

Only thing i am missing...is no need for injecting custom wrapper into the Illustrator svg or possibly a Illustrator script that automatically exports the SVG with the added wrapper. As that makes it way easier for non-scripters to use.

Apparently a script isnot that hard... this is a basic SVG export script from Illustrator.
Just have to figure out how and where to add the custom wrapper...

function exportFileAsSvg(path) {
    const options = new ExportOptionsWebOptimizedSVG();
    options.compressed = false;
    options.coordinatePrecision = 3;
    options.cssProperties = SVGCSSPropertyLocation.PRESENTATIONATTRIBUTES;
    options.fontSubsetting = SVGFontSubsetting.None;
    options.fontType = SVGFontType.SVGFONT;
    options.svgResponsive = false;

    app.activeDocument.exportFile(new File(path), ExportType.WOSVG, options);
}

exportFileAsSvg("X:\\foo.svg")

Luckily no need for any extra scripts or workarounds i guess. CTRL+G -> grouping and naming layers you want to trigger in Storyline in Illustrator ( as seen in the image ) and using the SVG Options as shown, will result in a proper id for those groups in the SVG. Have to test it first though.

Almost there ;-) 
https://360.articulate.com/review/content/95c7ceb6-6e90-4b7b-a838-34762497829f/review

Only changing the strokes now... have to focus on something else right now...but we almost have it :-)

The illustrator with groups.