This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The Element.attachShadow()
method attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot
.
Syntax
var shadowroot = element.attachShadow(shadowRootInit);
Parameters
shadowRootInit
- A
ShadowRootInit
dictionary, having the following field:mode
: A string specifying the encapsulation mode for the shadow DOM tree. One of:open.
Specifies open encapsulation mode.
It means elements of the shadow root are accessible from an outside world using element.shadowRoot
element.shadowRoot === shadowroot; // returns true
closed.
Specifies closed encapsulation mode.
This mode denies any access to node(s) of a closed shadow root from an outside world
element.shadowRoot === shadowroot; // returns false element.shadowRoot === null; // returns true
Returns
Returns a ShadowRoot
.
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'attachShadow()' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 53.0 | No support | No support | 43.0 | 10.0 |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 53.0 | 53.0 | No support | ? | ? | ? | ? |
Document Tags and Contributors
Tags:
Contributors to this page:
iamashish,
DomenicDenicola,
jpmedley,
RyanNerd,
valtlai,
theefer,
fleurdeswift,
jwhitlock,
tomfun,
rolfedh,
arthurevans
Last updated by:
iamashish,