Convert custom elements or webcomponents with shadow root dom

function getShadowElements(element) {
  const shadowElements = [];
  let subElements = element.querySelectorAll("*");
  for (let i = 0; i < subElements.length; i++) {
    let subElement = subElements[i];
    if (subElement && subElement.shadowRoot) {
      shadowElements.push(subElement);
    }
  }
  return shadowElements;
}
function convertShadowElements() {
  const shadowElements = getShadowElements(document);
  for (let i = 0; i < shadowElements.length; i++) {
    let shadowElement = shadowElements[i];
    const tag = shadowElement.tagName;
    let css = shadowElement.shadowRoot.innerHTML;
    css = css.replaceAll(':host', `.${tag}`);
    css = css.replaceAll(':root', `.${tag}`);
    const html = shadowElement.innerHTML;
    shadowElement.outerHTML = `
${css}${html}
`
  }
  // to execute many time with children customelements
  // if (getShadowElements(document).length > 0) {
  //   convertShadowElements();
  // };
}
convertShadowElements();