title: ShadowRoot property is null despite open
body: <p>I'm trying to access the ShadowRoot on my element and the property <code>element.shadowRoot</code> is returning <code>null</code>.<br>
  The <code>ShadowDOM</code> is defined as <code>mode: 'open'</code>, which is correct, I can even <code>console.log(element)</code> to see all of the properties and <code>shadowRoot</code> IS an object of <code>ShadowRoot</code> type.</p>
  
  <p>In my app I am trying to access the property like so:</p>
  
  <pre><code>let el = document.getElementById('elementId');
  ...
  console.log(el);
  console.log("this.shadowRoot = ???");
  console.log(el.shadowRoot);
  </code></pre>
  
  <p>Is this okay?</p>
  
  <p>Attached are the <code>console.log()</code> output from the console, as you can see the <code>shadowRoot</code> definitely is there.<br>
  (From the Firefox console)<br>
  <a href="https://i.stack.imgur.com/p5cG0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/p5cG0.png" alt="enter image description here"></a></p>
  
  <p>I have tried in both latest Firefox and Chrome, both have same result.<br>
  What am I doing wrong?</p>
  
  <p>Thanks</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I have created <a href="https://jsfiddle.net/rnwvoz05/3/" rel="noreferrer">a little JSFiddle</a>.<br>
  If you press <code>F12</code> and view the console you can see that the element is logged and shows the <code>shadowRoot</code> property, but logging the <code>shadowRoot</code> displays <code>null</code>.</p>
  
  <p>I wonder if this is a bug? Perhaps it is not fully implemented yet?</p>
  
  <p>I have seen <a href="https://stackoverflow.com/questions/50028945/element-shadowroot-in-firefox">Element.shadowRoot in firefox</a> but I am using the latest (65) of Firefox and (72) Chrome.</p>