요소에 섀도우(shadow) DOM 트리를 연결하고 ShadowRoot
에 대한 참조를 반환한다.
element.attachShadow(shadowRootInit)
다음 옵션을 프로퍼티로 갖는 객체를 지정할 수 있다.
mode
: DOM 트리의 캡술화 모드를 문자열로 지정한다. 설정 가능한 값은 다음과 같다.open
: 섀도우(shadow) 루트 요소는 루트 외부의 자바스크립트에서 엑세스할 수 있다.closed
: 섀도우(shadow) 루트 요소는 닫히게 되어 외부의 자바스크립트에서 엑세스할 수 없다.delegatesFocus
true
로 설정하면 포커스 가능성과 관련된 사용자 정의 요소 문제를 완화시키는 동작을 지정한다, 섀도우(shadow) DOM에서 포커스를 지정할 수 없는 부분을 클릭하면 첫 번째로 포커스가 가능한 부분에 포커스가 주어지며 섀도우(shadow) 호스트에 사용 가능한 모든 :focus
스타일링이 지정된다. 기본값은 false
이다.slotAssignment
: 섀도우(shadow) DOM 트리의 슬롯 할당 모드를 지정하는 문자열이다.named
: 섀도우(shadow) 루트 내의 <slot>
요소에 자동으로 할당된다. 이 섀도우 루트 내의 <slot>
의 이름 속성과 일치하는 슬롯 속성을 가진 호스트의 모든 자손이 해당 슬롯에 할당된다. 슬롯 속성이 없는 호스트의 모든 최상위 자식은 name
속성이 없는 <slot>
이 있는 경우 해당 슬롯에 할당한다. 기본값으로 사용된다.manual
: <slot>
요소에 자동으로 할당되지 않는다. 대신 HTMLSlotElement.prototype.assign()
메소드를 사용하여 수동으로 할당한다.ShadowRoot
오브젝트를 반환한다.