Custom Element Serializer

Readme.md

Getting an HTML snapshot of current DOM including Custom Elements

This is an attempt to get HTML snapshot of current document in browser to report current state to server, to get a screenshot on the server without running JS

element-to-string.js

function renderToString(element) {
  if (!element.shadowRoot) {
    return element.outerHTML;
  }
  
  const elementAdoptedStyles = element.shadowRoot.adoptedStyleSheets?.map((style) => {
      let cssText = [];
      for (const rule of style.cssRules) {
        cssText.push(rule.cssText);
      }
      return cssText.join('');
    });

  return element.outerHTML.replace(
    element.innerHTML, 
    `<template shadowroot="open">${
      element.shadowRoot.innerHTML
    }${ elementAdoptedStyles ? `<style>${elementAdoptedStyles}</style>` : '' }</template>${element.innerHTML}`);
}