---
title: DocumentOrShadowRoot
slug: Web/API/DocumentOrShadowRoot
tags:
  - API
  - Document
  - DocumentOrShadowRoot
  - Interface
  - NeedsTranslation
  - Reference
  - ShadowRoot
  - TopicStub
  - shadow dom
translation_of: Web/API/DocumentOrShadowRoot
---
<div>{{APIRef("Web Components")}}</div>

<p><span class="seoSummary"><a href="/ko/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM API</a> 의 <strong><code>DocumentOrShadowRoot</code></strong> 믹스인(mixin)은 문서와 섀도우 루트간에 공유되는 API를 제공합니다. 다음 기능은 문서{{DOMxRef("Document")}}와 {{DOMxRef("ShadowRoot")}}에 모두 포함되어 있습니다.</span></p>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}</dt>
 <dd>포커스를 가지는 섀도우 루트 내의 요소{{DOMxRef('Element')}}를 반환합니다.</dd>
 <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}{{ReadOnlyInline}}</dt>
 <dd>현재 이 문서에서 full screen mode인 요소{{DOMxRef('Element')}}를 반환합니다.</dd>
 <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
 <dd>포인터가 잠겨있는 동안 마우스 이벤트의 대상으로 설정된 요소를 반환합니다. 잠금이 보류중이거나 포인터가 잠금 해제되어 있거나, 대상이 다른 문서(document)에 있으면 <code>null</code>을 반환합니다.</dd>
 <dt>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}</dt>
 <dd>문서에 명시적으로 링크되었거나 포함하고 있는 스타일 시트의 {{DOMxRef('CSSStyleSheet')}} 객체의 {{DOMxRef('StyleSheetList')}}를 반환합니다.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<dl>
 <dt>{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}</dt>
 <dd>유저가 선택한 텍스트의 범위, 또는 캐럿(caret - 텍스트 커서)의 현재 위치를 나타내는 {{DOMxRef('Selection')}}객체를 반환합니다.</dd>
 <dt>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
 <dd>지정된 좌표의 최상위 요소를 반환합니다.</dd>
 <dt>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
 <dd>지정된 자표에 있는 모든 요소의 배열을 반환합니다.</dd>
 <dt>{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
 <dd>캐럿을 포함한 DOM 노드와 그 노드 내에서 캐럿의 문자 오프셋을 포함한 {{DOMxRef('CaretPosition')}}를 반환합니다.</dd>
</dl>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG','#mixin-documentorshadowroot','DocumentOrShadowRoot')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td>
   <td>{{Spec2('Shadow DOM')}}</td>
   <td>Implementation in Shadow DOM.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility">Browser Compatibility</h2>



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

<p>[1] This interface's features are still implemented on the {{DOMxRef("Document")}} object.</p>