/**
 * A declarative shadow root component
 *
 * Hooks into SolidJS' Portal's `useShadow` prop
 * to handle shadow DOM and the component lifecycle
 */
const ShadowRoot: ParentComponent = (props) => {
  let div: HTMLDivElement;
  return (
    <div ref={div!}>
      <Portal mount={div!} useShadow={true}>
        {props.children}
      </Portal>
    </div>
  );
};

/**
 * A declarative shadow root component
 *
 * Hooks into SolidJS' Portal's `useShadow` prop
 * to handle shadow DOM and the component lifecycle
 */
const ShadowRoot: ParentComponent = (props) => {
  let div: HTMLDivElement;
  return (
    <div ref={div!}>
      <Portal mount={div!} useShadow={true}>
        {props.children}
      </Portal>
    </div>
  );
};