I'm currently exploring using Pagedjs for an ebook-to-print workflow at my company. We work on a lot of textbooks, and one of our main requirements is the ability to position definitions in smaller columns to the left or right of the main text. I have a custom module I'm adding with Paged.registerHandlers() that does this quite well:

One issue I'm running into, though, is copying styles to the repositioned element. One other requirement we have is the ability to keep the CSS cascade from the digital ebook, so that we can keep the CSS as is as much as possible. I was hoping to copy the styles before Pagedjs parses the content using window.getComputedStyle in the beforeParsed hook, but all of the styles returned by getComputedStyle are empty. Here is how I'm trying to copy the styles:

export const copyCssRules = (el, newNode) => {
	const styles = window.getComputedStyle(el);
	Object.keys(styles).forEach((key) => newNode.style.setProperty(
		key,
		styles.getPropertyValue(key),
		styles.getPropertyPriority(key),
	));
};

This is being called in the beforeParsed hook of the handler that positions the definitions. Essentially, my hope is to be able to take any CSS properties with a selector of (for example) .glossary .definition and apply it directly to the repositioned element. The selector for the repositioned element would be (for example) .column .definition, so any CSS with a selector of .glossary .definition wouldn't apply.

Is there a way to copy styles over to elements that have been repositioned, or is there an expected best practice for this with Pagedjs?