createShadowRoot.ts

async function createShadowRoot(
  element: HTMLElement,
  options: {
    html: string;
    css?: string;
    js?: (element: HTMLElement) => void | Promise<void>;
  },
) {
  const _window = element.ownerDocument.defaultView || window;
  const { html, css, js } = options;

  const shadowRoot = element.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = html;

  const styleSheet = new _window.CSSStyleSheet();
  shadowRoot.adoptedStyleSheets.push(styleSheet);

  const promises = [
    css ? styleSheet.replace(css) : undefined,
    js ? js(element) : undefined,
  ];
  await Promise.all(promises.filter(Boolean));
}