Element

<div @ref="box" data-demo="butil">...</div>

@code {
    private ElementReference box;

    private async Task InspectAttributes()
    {
        var has = await box.HasAttribute("data-demo");
        var value = await box.GetAttribute("data-demo");
        var names = await box.GetAttributeNames();

        await box.SetAttribute("data-demo", "updated");
        await box.ToggleAttribute("hidden", force: null);
        await box.RemoveAttribute("data-demo");
    }
}

<div @ref="box" style="overflow:auto; max-height:12rem">...</div>

@code {
    private ElementReference box;

    private async Task Scroll()
    {
        await box.Scroll(new ScrollOptions { Top = 120, Behavior = ScrollBehavior.Smooth });

        await box.ScrollBy(0, 48);

        await box.ScrollIntoView(new ScrollIntoViewOptions
        {
            Behavior = ScrollBehavior.Smooth,
            Block = ScrollLogicalPosition.Center,
            Inline = ScrollLogicalPosition.Nearest,
        });
    }
}

<div @ref="box">...</div>

@code {
    private ElementReference box;

    private async Task Measure()
    {
        var rect = await box.GetBoundingClientRect(); // Rect { X, Y, Width, Height }

        var clientWidth = await box.GetClientWidth();
        var offsetHeight = await box.GetOffsetHeight();
        var scrollHeight = await box.GetScrollHeight();
        var scrollTop = await box.GetScrollTop();
        var tagName = await box.GetTagName();
    }
}

<input @ref="input" />
<div @ref="box" @onpointerdown="Capture">...</div>

@code {
    private ElementReference box;
    private ElementReference input;

    private async Task Capture(PointerEventArgs args)
    {
        await input.Blur();

        // The id comes from the pointer event that started the gesture - capture is per pointer.
        await box.SetPointerCapture(args.PointerId);
        var captured = await box.HasPointerCapture(args.PointerId);
        await box.ReleasePointerCapture(args.PointerId);

        // Needs a user gesture, and the browser shows its own notice on the way in.
        await box.RequestPointerLock();
    }
}

<div @ref="box">...</div>
<button @onclick="GoFullScreen">Full screen</button>

@code {
    private ElementReference box;

    // Must run inside a user gesture: a request that did not come from one is refused.
    private async Task GoFullScreen() =>
        await box.RequestFullScreen(new FullScreenOptions
        {
            NavigationUI = FullScreenNavigationUI.Show,
        });
}

<div @ref="box">...</div>

@code {
    private ElementReference box;

    private async Task Rewrite()
    {
        await box.SetId("hero");
        await box.SetClassName("card highlighted");
        await box.SetInnerText("Hello from C#");
        await box.SetTabIndex(2);
        await box.SetAccessKey("k");

        var html = await box.GetInnerHtml();
        await box.SetInnerHtml("<strong>Trusted markup only!</strong>");
        var outer = await box.GetOuterHtml();
    }
}

<div @ref="box">...</div>

@code {
    private ElementReference box;

    private async Task SetModes()
    {
        await box.SetContentEditable(ContentEditable.True);
        var editable = await box.IsContentEditable();

        await box.SetDir(ElementDir.Rtl);
        await box.SetEnterKeyHint(EnterKeyHint.Send);
        await box.SetInputMode(InputMode.Numeric);
        await box.SetHidden(Hidden.UntilFound);
        await box.SetInert(true);
    }
}

@inject IJSRuntime js

private ButilSubscription? clickSub;

clickSub = await box.SubscribeEvent<ButilMouseEventArgs>(
    js, ButilEvents.Click, args => Console.WriteLine(args.OffsetX));

// capture / passive / once via options:
await input.SubscribeEvent<ButilKeyboardEventArgs>(
    js, ButilEvents.KeyDown, args => Console.WriteLine(args.Key),
    new ButilEventListenerOptions { Once = true });

// element subscriptions must be disposed:
await clickSub.DisposeAsync();

<div @ref="box" data-demo="butil">...</div>

@code {
    private ElementReference box;

    private async Task Check()
    {
        var isMatch = await box.Matches("[data-demo]");

        // Detaches the element from the DOM. Blazor still believes it rendered it, so anything
        // touching the reference afterwards is talking about a node nothing can see.
        await box.Remove();
    }
}

<form>
    <button @ref="button" type="button">Target</button>
    <input @ref="input" />
    <div @ref="box">...</div>
</form>

@code {
    private ElementReference box;
    private ElementReference input;
    private ElementReference button;

    private async Task Activate()
    {
        await button.Click();

        await input.Focus(new FocusOptions { PreventScroll = true });

        var visible = await box.CheckVisibility(new CheckVisibilityOptions
        {
            OpacityProperty = true,
            VisibilityProperty = true,
            ContentVisibilityAuto = true,
        });

        var insideForm = await box.Closest("form");
    }
}

<div @ref="box">...</div>

@code {
    private ElementReference box;

    private async Task Style()
    {
        await box.AddClass("card", "highlighted");
        var toggled = await box.ToggleClass("selected");
        var swapped = await box.ReplaceClass("highlighted", "muted");
        var classes = await box.GetClassList();

        await box.SetData("userId", "42");        // writes data-user-id
        var id = await box.GetData("userId");
        var keys = await box.GetDataNames();

        await box.SetStyleProperty("--accent", "#7c3aed");
        await box.SetStyleProperty("outline", "2px solid var(--accent)", important: true);
        var css = await box.GetStyleText();
    }
}

<div @ref="box">...</div>

@code {
    private ElementReference box;

    private async Task Insert(string untrustedMarkup)
    {
        await box.Append("appended text");
        await box.Prepend("prepended text");
        await box.ReplaceChildren("everything else is gone");

        await box.InsertAdjacentText(InsertPosition.BeforeEnd, "<not markup>");
        await box.InsertAdjacentHtml(InsertPosition.AfterBegin, "<em>trusted markup</em>");

        await box.SetHtml(untrustedMarkup);   // sanitized; throws where unsupported
        var html = await box.GetHtml(new GetHtmlOptions { SerializableShadowRoots = true });
    }
}

<div @ref="box">...</div>

@code {
    private ElementReference box;

    private async Task Describe()
    {
        await box.SetRole("button");
        await box.SetAriaLabel("Close the dialog");
        await box.SetAriaExpanded("true");
        await box.SetAriaHidden("false");

        var label = await box.GetAriaLabel();

        await box.AriaNotify("Upload finished",
            new AriaNotifyOptions { Priority = AriaNotifyPriority.High });
    }
}

<div @ref="panel">...</div>

@code {
    private ElementReference panel;

    private async Task Popover()
    {
        // The attribute is what makes it a popover; without it the three calls below throw.
        await panel.SetPopover(ElementPopover.Auto);

        await panel.ShowPopover();
        var showing = await panel.TogglePopover();
        await panel.HidePopover();
    }
}

<svg><use @ref="icon" /></svg>
<table @ref="table"><tr><td>...</td></tr></table>
<em @ref="inlineText">a long run of text that wraps over several lines</em>
<div @ref="box" style="overflow:auto; max-height:12rem">...</div>

@code {
    private const string Xlink = "http://www.w3.org/1999/xlink";

    private ElementReference box;
    private ElementReference icon;
    private ElementReference table;
    private ElementReference inlineText;

    private async Task Read()
    {
        await icon.SetAttributeNS(Xlink, "xlink:href", "#star");
        var href = await icon.GetAttributeNS(Xlink, "href");

        var hasRows = await table.QuerySelectorMatches("tr");
        var rowCount = await table.QuerySelectorAllCount("tr");

        var rects = await inlineText.GetClientRects();  // one per line box

        await box.SetScrollTop(0);
        await box.ScrollTo(new ScrollOptions { Top = 240, Behavior = ScrollBehavior.Smooth });
    }
}

<div @ref="box">...</div>

@code {
    private ElementReference box;

    private async Task Annotate()
    {
        await box.SetTitle("Shown on hover");
        await box.SetLang("fa-IR");
        await box.SetDraggable(true);
        await box.SetSpellcheck(false);
        await box.SetTranslate(false);
        await box.SetAutocapitalize(Autocapitalize.Words);
        await box.SetWritingSuggestions(false);
        await box.SetSlot("content");                      // which shadow slot it asks to land in
        await box.SetPart("surface highlight");            // what ::part() outside the shadow tree can style
        await box.SetElementTiming("hero-image");          // the name Element Timing reports it under

        var localName = await box.GetLocalName();          // "div", where GetTagName gives "DIV"
        var children = await box.GetChildElementCount();
        var zoom = await box.GetCurrentCssZoom();
        var offsetParent = await box.GetOffsetParentTagName();
    }
}

<video @ref="_video" src="clip.webm" playsinline></video>

// starting playback can be refused - autoplay outside a gesture, or an undecodable source:
var started = await _video.Play();

await _video.SetVolume(0.4);       // clamped to 0-1; ignored on iOS, where volume is hardware
await _video.SetMuted(true);       // the mute toggle that works everywhere
await _video.SetPlaybackRate(1.5);
await _video.SetCurrentTime(30);   // false when the media isn't seekable yet

var state = await _video.GetMediaState();
// state.Paused / CurrentTime / Duration / BufferedEnd / ReadyState / VideoWidth ...

await _video.Pause();

<div @ref="column">
    <div @ref="marker">a sibling to insert before</div>
</div>

<div @ref="card">
    <video controls></video>
</div>

@code {
    private ElementReference card;
    private ElementReference column;
    private ElementReference marker;

    private async Task Move()
    {
        // move `card` into `column`, before `marker`
        var moved = await column.MoveBefore(card, marker);

        // or append it at the end
        await column.MoveBefore(card);
    }
}