---
title: Element.openOrClosedShadowRoot
slug: Web/API/Element/openOrClosedShadowRoot
translation_of: Web/API/Element/openOrClosedShadowRoot
---
<div>{{APIRef("Shadow DOM")}}{{Draft}}{{non-standard_header}}
<div class="note"><strong>Note:</strong> This API is available only to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</div>
</div>

<p><span class="seoSummary"><code>Element.openOrCloseShadowRoot</code> 是一个只读属性。represents the shadow root hosted by the element, regardless if its {{DOMxRef("ShadowRoot.mode", "mode")}} is <code>open</code> or <code>closed</code>.</span> Use {{DOMxRef("Element.attachShadow()")}} to add a shadow root to an existing element.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox notranslate">var <em>shadowroot =</em><em> element</em>.shadowRoot;
</pre>

<h3 id="Value">Value</h3>

<p>A {{DOMxRef("ShadowRoot")}} object instance, regardless if its {{DOMxRef("ShadowRoot.mode", "mode")}} is set to <code>open</code> or <code>closed</code>, or <code>null</code> if no shadow root is present. (See {{DOMxRef("Element.attachShadow()")}} for further details).</p>

<h2 id="Specifications">Specifications</h2>

<p><em>This property is not part of any specification.</em></p>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("api.Element.openOrClosedShadowRoot")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{DOMxRef("Element.shadowRoot")}}</li>
</ul>