Class Highlight

Namespace

CSharpToJavaScript.APIs.JS

Assembly

CSharpToJavaScript.dll

The Highlight interface of the CSS Custom Highlight API is used to represent a collection of Range instances to be styled using the API.

[Value("Highlight")]
public class Highlight

Inheritance

object

Highlight

Inherited Members

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Remarks

To style arbitrary ranges in a page, instantiate a new Highlight object, add one or more Range objects to it, and register it using the HighlightRegistry.

A Highlight instance is a Set-like object that can hold one or more Range objects.

-{{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}}
-CSS custom highlight API module
-CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web

See also on MDN

Constructors

Highlight()

public Highlight()

Highlight(params AbstractRange[])

The Highlight() constructor returns a newly created
Highlight object which can hold a collection of Range objects to be styled using the {{domxref("css_custom_highlight_api", "CSS Custom Highlight API", "", "nocode")}}.

public Highlight(params AbstractRange[] initialRanges)

Parameters

initialRanges AbstractRange[]

Remarks

-{{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}}
-CSS custom highlight API module
-CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web

See also on MDN

Properties

Priority

The priority property of the Highlight interface is a number used to determine which highlight's styles should be used to resolve style conflicts in overlapping parts. Highlights with a higher priority number have preference over those with a lower priority.

[Value("priority")]
public long Priority { get; set; }

Property Value

long

An integer.

Remarks

It is possible to create Range objects that overlap in a document.

When overlapping ranges are used by multiple different Highlight objects, and when those highlights are styled using {{cssxref("::highlight")}} pseudo-elements, this may lead to conflicting styles.

If two text ranges overlap and are both highlighted using the {{domxref("css_custom_highlight_api", "CSS Custom Highlight API", "", "nocode")}}, and if they're both styled using the color CSS property, the browser needs to decide which color should be used for styling the text in the overlapping part.

If no priority is set, all highlights have the same priority, and the browser chooses the most recently registered highlight to style the overlapping parts.

Note that all the styles of a highlight are applied and the browser only needs to resolve conflicts when the same CSS properties are used by multiple overlapping highlights. The highlight style conflict resolution also does not depend on the order in which the {{cssxref("::highlight")}} pseudo-elements rules appear in the source, or whether or not CSS properties are marked as !important.

-{{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}}
-CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web

See also on MDN

Type

The type property of the Highlight interface is an enumerated {{jsxref("String")}} used to specify the meaning of the highlight. This allows assistive technologies, such as screen readers, to include this meaning when exposing the highlight to users.

[Value("type")]
public HighlightType Type { get; set; }

Property Value

HighlightType

The possible values of the type enumerated value are:

Remarks

By default, a highlight object will have its type set to highlight, but you can change it to spelling-error or grammar-error.

-{{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}}
-CSS custom highlight API module
-CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web

See also on MDN