Is there a way to defined a DOM element (including children) to be not to be touched?

[cmahnke]

I've come quite far with my Vivliostyle powered book project over the weekend.

Now I have an issue when I try to include a element that is bound to some JS functionality. In general its works, but the layout get's distorted by the layouting phase. The JS is working in a way that it tries to fit itself into the given dimensions (for example by a wrapper container element). This works well if I open the HTML unprocessed into a browser. But to manage tat the JS provides it's own CSS (it doesn't applies it itself).
I've implemented a ResizeObserver to make sure that is only uses the dimensions determinated by the layouter.
But even with this in place there are issues since vivliostyle walks down the whole tree and rewrites the classes and thus the applied styles.

Is there a way to stop that at a certain point? One possibility might be a custom CSS property (like -vs-ignore: true), another way might be to pass classes on the command line that would be ignored in processing.

Is there already such a posibility?

[cmahnke]

I've found a solution for my current project:
It can be solved by reapplying stylesheets after the layouting is done, in my case after the resize has been fired. To do that I pass the CSS to the JS as string (done by Esbuild, other bundlers can also do it) and add it as a inline style to the HTML head. It's a bit convoluted but works.
In terms of a easy solution via CLI this would mean that there should be a possibility to pass a stylesheet verbatim. Even though there is a --style argument I'm not sure if it already does that or if it's also mangled and repacked.

[MurakamiShinyu]

Vivliostyle.js's JS handling has limitations. See the comments in the issue:

• Styles not applied to elements created with javascript vivliostyle.js#975

The stylesheet given with --style is treated as an author stylesheet as if it was linked in the input document.

[cmahnke]

Thanks, I wasn't aware of the existing issue, since it also contains a description of the inner workings it might have been helpful. Anyways I solved it mostly by try and error: Its certainly not the most elegant solution...

From my point of view this area could be improved since having the possibilty to print JS output is a major advantage against other project in the CCS for print area, since it allows the reuse of JS libraries for diagrams or maps...

Maybe I just hit #627 in my initial attempts.