title: How to detect if an HTML Element is the root of a React Component?
body: <p>Is there a way to detect if an HTML Element is the root of any React component in a production app?</p>
  <p>I'm not referring to detecting wether an element is the root of <strong>the entire</strong> React application, rather detecting if an element is the root of any component.</p>
  <p>To illustrate:</p>
  <p>Let's say we have the following React components:</p>
  <pre class="lang-js prettyprint-override"><code>const FooBar = () =&gt; {
    return (
      &lt;div className=&quot;foobar&quot;&gt;
        &lt;span&gt; foo &lt;/span&gt;
        &lt;button&gt; bar &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  const Container = () =&gt; {
    return (
      &lt;div&gt;
        &lt;a className=&quot;john&quot;&gt; john &lt;/a&gt;
        &lt;a&gt; doe &lt;/a&gt;
        &lt;FooBar /&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>That transpiles to the following HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;a class=&quot;john&quot;&gt; john &lt;/a&gt;
    &lt;a&gt; doe &lt;/a&gt;
    &lt;div class=&quot;foobar&quot;&gt;
      &lt;span&gt; foo &lt;/span&gt;
      &lt;button&gt; bar &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>In a production deployment, is there a way to do this from a chrome extension (external script)? and how?</p>
  <pre class="lang-js prettyprint-override"><code>const foobarDiv = document.querySelector('div.foobar');
  const span = document.querySelector('span');
  const a = document.querySelector('a.john');
  isReactComponentRoot(foobarDiv); // true
  isReactComponentRoot(span); // false
  isReactComponentRoot(a); // false
  </code></pre>