Compatability with Blazor updating?

[HurricanKai]

Is this compatible with Blazor updating the DOM? Wouldn't that override all changes? For example:

@page "/"
@inject BlazorQueryDOM DOM

<h1>@TestVal</h1>

@code {
    string TestVal = "TestA";

    protected override async Task OnAfterRenderAsync()
    {
      await DOM.Select("h1").Text("TestB");
      TestVal = "TestC"
    }
}

What will actually be displayed? (I'm not at home and I'm really interested into this, maybe you can answer, else I'll try it out later)

[kevinjpetersen]

Hey @HurricanKai, thanks for your concern/question!

I just tested this exact scenario, and you seem to be right that there is some weird things happening in cases like this. It seems that setting the content of an element after having the binded "TestVal", unbinds it and makes TestVal no longer display.

I'm gonna look into it to see if I can find a possible fix.

[CSBatchelor]

You'll definitely want to avoid modifying the DOM manually when using Blazor. In Blazor's JS Interop documentation it says as much.

Warning

The preceding example modifies the Document Object Model (DOM) directly for demonstration purposes only. Directly modifying the DOM with JavaScript isn't recommended in most scenarios because JavaScript can interfere with Blazor's change tracking.

Later in the documentation, it states that they would only recommend modifying an element if the element started out empty. That way Blazor doesn't try to diff it.

Perhaps moving forward, this package shouldn't support updating the DOM, and should only support getting data/information from the DOM, since Blazor is lacking in that regard.

[amazingalek]

Perhaps moving forward, this package shouldn't support updating the DOM, and should only support getting data/information from the DOM, since Blazor is lacking in that regard.

I use this project specifically for DOM manipulation, as I'm making a Chrome extension with Blazor for manipulating web pages.

[kevinjpetersen]

Perhaps moving forward, this package shouldn't support updating the DOM, and should only support getting data/information from the DOM, since Blazor is lacking in that regard.

I use this project specifically for DOM manipulation, as I'm making a Chrome extension with Blazor for manipulating web pages.

I can definitely see this use case as you just pointed out. Being able to manipulate DOM's easily in Chrome extensions is really powerful.

I do agree that supporting both scenarios would make a lot of sense.