title: How can I Insert data into a shadow dom using React?
body: <p>I am trying to insert data into a shadow dom using React.</p>
  <p>The code below used to work, but when a made &quot;unrelated&quot; changes to other code it stopped working. I think that the problem is that the component now (as compared to before) only runs once. On this run shadowHost is null so shadowRoot is not attached.</p>
  <p>What is a reasonable way to make this work?</p>
  <pre><code>import React, { useRef } from &quot;react&quot;;
  
  export enum ViewerStyle {
    Svg = &quot;svg&quot;,
    ProcessedSvg = &quot;processedsvg&quot;,
  }
  
  type Props = {
    serialized: string;
    viewerStyleModifier: ViewerStyle;
  };
  
  export default function SvgImageViewer(props: Props) {
    const { serialized, viewerStyleModifier: xmlType } = props;
  
    if (!serialized) {
      return &lt;div className={`viewer viewer--${xmlType}`}&gt;&lt;/div&gt;;
    }
  
    const shadowHost = useRef&lt;HTMLDivElement&gt;(null);
  
    let shadowRoot: ShadowRoot | null = null;
    if (shadowHost.current instanceof HTMLElement &amp;&amp; !shadowHost.current.shadowRoot) {
      shadowRoot = shadowHost.current.attachShadow({ mode: &quot;open&quot; });
    }
  
    if (shadowRoot instanceof ShadowRoot) {
      shadowRoot.innerHTML = `
        &lt;div class=&quot;viewer viewer--${xmlType}&quot;&gt;
          ${serialized}
        &lt;/div&gt;
      `;
    }
  
    return &lt;div ref={shadowHost}&gt;&lt;/div&gt;;
  }
  </code></pre>