Return html without modifying DOM

[harmeetjaipur]

Hi,

I was wondering if it is possible to traverse through and object that has HTML and convert those styles into inline styles and return the result?

Thanks

[lukehorvat]

It's not possible with the current implementation, but it would certainly be a nice feature to add. Cool idea. 👍

I will implement it at some point but don't really have any time right now. If you need it soon, feel free to make a PR.

[saksham-sg01]

Any update on this? I need something exactly like this.

[saksham-sg01]

Or maybe a way to revert dom to the previous state? Please suggest.

[joe-hilling]

Reverting to the previous state works:

const previous_dom_element = svg_dom_element.cloneNode()
computedStyleToInlineStyle(svg_dom_element)
// do something
svg_dom_element.parentNode.replaceChild(svg_dom_element, previous_dom_element)

However I am using interactive animation also and the event listeners are lost.

[joe-hilling]

Here is a rewrite that handles it

const computedStyleToInlineStyle = (original, cloned) => {

  // recursion for the children
  for(let i=0 ; i < original.children.length ; i++){
    computedStyleToInlineStyle(original.children[i], cloned.children[i])
  }

  const computed_style = getComputedStyle(original)
  for(let i=0 ; i < computed_style.length; i++){
    const property = computed_style.item(i)
    cloned.style[property] = computed_style.getPropertyValue(property)
  }
}

usage:

  const cloned_element = svg_dom_element.cloneNode(true)
  computedStyleToInlineStyle(svg_dom_element, cloned_element)

  const data = serializer.serializeToString(cloned_element)