Table of Contents

Class ShadowRoot

Namespace
CSharpToJavaScript.APIs.JS
Assembly
CSharpToJavaScript.dll

The ShadowRoot interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from a document's main DOM tree.

[Value("ShadowRoot")]
public class ShadowRoot : DocumentFragment, NonElementParentNode, ParentNode, DocumentOrShadowRoot
Inheritance
ShadowRoot
Implements
Derived
Inherited Members

Remarks

You can retrieve a reference to an element's shadow root using its ShadowRoot property, provided it was created using AttachShadow(ShadowRootInit) with the mode option set to open.

-Using the shadow DOM
-Web components

See also on MDN

Constructors

ShadowRoot() 

public ShadowRoot()

Properties

Clonable

The clonable read-only property of the ShadowRoot interface returns true if the shadow root is clonable, and false otherwise.

[Value("clonable")]
public bool Clonable { get; }

Property Value

bool

true if the shadow root is clonable, and false otherwise.

Remarks

When the value is true, a shadow host cloned with CloneNode(bool) or ImportNode(Node, bool) will include a copy of the shadow root.

By default the value is false.
It can be set to true using the clonable option of the AttachShadow(ShadowRootInit) method or by setting the shadowrootclonable attribute of the <template> element that is being used to declaratively attach a shadow root.

See also on MDN

DelegatesFocus

The delegatesFocus read-only property of the ShadowRoot interface returns true if the shadow root delegates focus, and false otherwise.

[Value("delegatesFocus")]
public bool DelegatesFocus { get; }

Property Value

bool

true if the shadow root delegates focus, and false otherwise.

Remarks

If true, when a non-focusable part of the shadow DOM is clicked, or .focus() is called on the host element, the first focusable part inside the host's shadow DOM is given focus, and the shadow host is given any available :focus styling.

Focus is of particular importance for keyboard users (including those using screen readers). delegatesFocus default behavior is to focus the first focusable element — which may be undesirable if that element is not meant to be part of the tabbing order (for example, an element with tabindex="-1"), or if a more 'important' focusable element should receive initial focus (for instance, the first text field rather than the 'close' button which precedes it). In such cases, the autofocus attribute can be specified on the element which should receive initial focus. Use the autofocus attribute with caution as it can introduce accessibility issues, such as bypassing important content which may go unnoticed due to focus being set to an element later in the DOM order.

The property value is originally set using the delegatesFocus property of the object passed to AttachShadow(ShadowRootInit), or using the shadowrootdelegatesfocus attribute of the <template> element when a shadow root is created declaratively.

See also on MDN

Host

The host read-only property of
the ShadowRoot returns a reference to the DOM element the
ShadowRoot is attached to.

[Value("host")]
public Element Host { get; }

Property Value

Element

A DOM 'Element'.

Remarks

-part and exportparts HTML attributes
-template and slot HTML elements
-:host, :host_function, and :host-context CSS pseudo-classes
-{{CSSXref("::part")}} and {{CSSXref("::slotted")}} CSS pseudo-elements

See also on MDN

InnerHTML

WARNING
This property parses its input as HTML, writing the result into the DOM.
APIs like this are known as injection sinks, and are potentially a vector for cross-site-scripting (XSS) attacks, if the input originally came from an attacker.
[Value("innerHTML")]
public Union90 InnerHTML { get; set; }

Property Value

Union90

Getting the property returns a string containing the HTML serialization of the shadow root's descendants.Setting the property accepts either a TrustedHTML object or a string.
It parses this value as HTML and replaces all the element's descendants with the result.
When set to the null value, that null value is converted to the empty string (""), so shadowRoot.innerHTML = null is equivalent to shadowRoot.innerHTML = "".

Remarks

You can mitigate this risk by always assigning TrustedHTML objects instead of strings and enforcing trusted types.
See Security considerations for more information.

The innerHTML property of the ShadowRoot interface gets or sets the HTML markup to the DOM tree inside the ShadowRoot.

See also on MDN

Mode

The mode read-only property of the ShadowRoot specifies its mode — either open or closed.
This defines whether or not the shadow root's internal features are accessible from JavaScript.

[Value("mode")]
public ShadowRootMode Mode { get; }

Property Value

ShadowRootMode

A string value that can have either of the values:

Remarks

When the mode of a shadow root is "closed", the shadow root's implementation internals are inaccessible and unchangeable from JavaScript—in the same way the implementation internals of, for example, the video element are inaccessible and unchangeable from JavaScript.

The property value is set using the mode property of the object passed to AttachShadow(ShadowRootInit), or using the shadowrootmode attribute of the <template> element when a shadow root is created declaratively.

See also on MDN

Onslotchange 

[Value("onslotchange")]
public EventHandlerNonNull Onslotchange { get; set; }

Property Value

EventHandlerNonNull

Serializable

The serializable read-only property of the ShadowRoot interface returns true if the shadow root is serializable.

[Value("serializable")]
public bool Serializable { get; }

Property Value

bool

true if the shadow root is serializable; false otherwise.

Remarks

If set, the shadow root may be serialized by calling the 'Element.GetHTML' or 'ShadowRoot.GetHTML' methods with the options.serializableShadowRoots parameter set true.

The serializable property of a shadow root is specified when the shadow root is created, either declaratively by adding the shadowrootserializable attribute on a <template> element (along with an allowed shadowrootmode value), or by setting the options.serializable parameter to true when using Element.attachShadow().

See also on MDN

SlotAssignment

The read-only slotAssignment property of the ShadowRoot interface returns the slot assignment mode for the shadow DOM tree. Nodes are either automatically assigned (named) or manually assigned (manual). The value of this property defined using the slotAssignment option when calling AttachShadow(ShadowRootInit).

[Value("slotAssignment")]
public SlotAssignmentMode SlotAssignment { get; }

Property Value

SlotAssignmentMode

A string that can be one of:

Remarks

-AttachShadow(ShadowRootInit)
-Assign(params Union69[])

See also on MDN

Methods

GetHTML(GetHTMLOptions)

The getHTML() method of the ShadowRoot interface is used to serialize a shadow root's DOM to an HTML string.

[Value("getHTML")]
public string GetHTML(GetHTMLOptions options = null)

Parameters

options GetHTMLOptions

Returns

string

A string that represents the HTML serialization of the shadow root.

Remarks

The method provides an options argument that enables the serialization of child nodes that are shadow roots.
The options can be used to include nested shadow roots that have been set as ShadowRootserializable, and/or a specified array of ShadowRoot objects, which may be either open or closed.

Without arguments, child nodes that are shadow roots are not serialized, and this method behaves in the same way as reading the value of InnerHTML.

Note that some browsers serialize the < and > characters as < and > when they appear in attribute values (see Browser compatibility).
This is to prevent a potential security vulnerability (mutation XSS) in which an attacker can craft input that bypasses a sanitization function, enabling a cross-site scripting (XSS) attack.

See also on MDN

SetHTMLUnsafe(Union89)

WARNING
This method parses its input as HTML, writing the result into the DOM.
APIs like this are known as injection sinks, and are potentially a vector for cross-site-scripting (XSS) attacks, if the input originally came from an attacker.
[Value("setHTMLUnsafe")]
public GlobalObject.Undefined SetHTMLUnsafe(Union89 html)

Parameters

html Union89

Returns

GlobalObject.Undefined

None (undefined).

Remarks

You can mitigate this risk by always passing TrustedHTML objects instead of strings and enforcing trusted types.
See Security considerations for more information.

NOTE

ShadowRoot.SetHTML should almost always be used instead of this method — on browsers where it is supported — as it always removes XSS-unsafe HTML entities.

The setHTMLUnsafe() method of the ShadowRoot interface can be used to parse HTML input into a DocumentFragment, optionally filtering out unwanted elements and attributes, and then use it to replace the existing tree in the Shadow DOM.

-ShadowRoot.SetHTML
-InnerHTML
-Element.SetHTML and SetHTMLUnsafe(Union85)
-Document.ParseHTML and ParseHTMLUnsafe(Union57)
-HTML Sanitizer API

See also on MDN

Edit this page