Is there a way to use DOM elements in Blazor

[doga6488]

Hi. Does Blazor provide to manipulate DOM elements ?(without js Interop).

Like the javascript code below :
var x = document.getElementById("myText");
document.getElementById("myText").value = "Johnny Bravo";
Thanks in advance.

[chrissainty]

Not currently. But in your example code you would just do this in your component using the bind syntax.

<input id="myText" bind="@Name" />

@functions {
    private string Name { get; set; } = "Johnny Bravo";
}

[doga6488]

Thanks @chrissainty

[SteveSandersonMS]

Blazor is specifically designed to provide a convenient and efficient way to update the UI without having to issue individual calls to mutate individual DOM elements. Blazor runs a diffing algorithm to work out the minimal set of changes to apply, and runs them in a batch. This will be far more performant than crossing the interop boundary separately for each element update, and potentially interleaving DOM mutations with repaints, etc. Most modern SPA frameworks are built around an architecture similar to this.

Blazor still does allow you to directly reach DOM elements if you want via its JS interop APIs (see https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0) but you should only do that for exceptional custom things, not for routine UI rendering.

[justcallmeM]

I would love you (@SteveSandersonMS) to give us - baby devs an example :)

[danroth27]

@justcallmeM Take a look at https://docs.microsoft.com/aspnet/core/blazor/javascript-interop to get started with JS interop. But like Steve said, most of the time you just let your component render and the framework will do the rest.

[dazinator]

I have found a simple bread and butter, every day, routine, UI rendering concern, that I am struggling to solve with blazor, even with js interop.

I need to fade out an element before it gets removed from the DOM. Steve made this super simple with KnockoutJS, obviously I understand blazor is still a work in progress.

The reason I mention it here (as it's already [mentioned here(https://github.com//issues/10389)) is because a solution to this problem ties back to being able to get the DOM elements associated with blazor components and here is why:

In foo.razor if I decide to stop rendering a Component to the DOM - say using a flag like so:

{
   if(IsVisible)
   {
    <SomeComponent></SomeComponent?
    }
}

When the IsVisible property is false and the component is no longer rendered - blazor removes that components HTML from the DOM - but doesn't give me any opportunity to apply a fade out transition.

So.. In order to work around this here is my thrilling idea..
I'll defer setting "IsVisible" to false, until after I have applied some Fade Out transition to the DOM elements rendered by <SomeComponent>.

I think this could work. How would I go about this:

1. I need to identify the DOM Elements rendered by <SomeComponent> so that I can toggle some css class on them which will apply my fade out transition. Sure I could peek at the components source and get class names, id's and such and use those to grab the elements with JsInterop but it seems to me a more efficient way would be if I could query blazor's "Shadow DOM equivalent", to get what it considers to be the DOM elements for <SomeComponent> based on it's current state.

2. Having identified the DOM elements that I need to fade out, I need a way to addEventListener's to them so that I can be notified in .NET code once particular events occur. For this example, I need to add an event listener for the ontransitioned event - so that I can detect when the fade out transition that I am about to apply, has finished, and then foo.razor can be notified, and then set "IsVisible" to false - which will then result in the components renderfragment being removed from the DOM completely.

I thought this sounded like a reasonable / achievable solution (front end work is not my speciality) but both 1 and 2 seem not possible. For 1) I'm not sure its possible to ask blazor to give me references to the DOM elements that are associated with a currently rendered component.. I'd either have to look in the components source to get a feel for appropriate query selectors, or I'd have to wrap the component in an additional Html element, like a div with a specific ID, and then use a selector that target that div. This approach would work but I don't feel like it's the best solution because it introduces additional layers into the DOM that should not be necessary. Given components can be nested N levels deep, and each one might use this mechanism to fade out it's children, this may result in a lot of additional wrapper div's all over the place. Example of this:

{
   if(IsVisible)
   {
    <Div id="awodawpojd">
    <SomeComponent></SomeComponent>
    </Div>
    }

@code {
 // stuff that will call into javascript and addEventListener on descendent of div id= "awodawpojd" to know when fadeout transition finished.
}
}

For 2) When using JSRuntime, all the examples I have seen only allow you to invoke a method on the javascript side that then immediately returns a result back. In my case I'd need the javascript side to register an event listener against some elements that then returns immediately, but later, when those event listeners are fired, they need to callback into .NET to notify foo.razor that the fade out transition has finished. I need something like this:

Action callback = ()=> { 
    IsVisible = false;
    StateHasChanged();
 };
JsRuntime.InvokeAsync("RegisterTransitionsCompletedEventListener", "some-element-id", callback);

However given everything I've explained above, the following probably better demonstrated what I'm looking for:

if(IsVisible)
{
  <SomeComponent ref="@MyComponent"></SomeComponent>
}
<button @onclick="@(()=>FadeRemove(MyComponent))"
@code {

bool IsVisible {get; set;}
SomeComponent MyComponent {get; set;} // reference to the component

void FadeRemove(Component component)
{
 var elements = ShadowDom.ElementsFor(component);
 int totalTopLevelElements = elements.Count;
 int totalFinishedTransitioning = 0;
 Action transitionFinished = ()=> {
    interlocked.Increment(ref totalFinishedTransitioning);
    if(totalFinishedTransitioning  == totalTopLevelElements)
    {
        IsVisible = false;
        StateHasChanged = true;
    }   
  };

  // I appreciate operations that update individual DOM elements is probably not optimal
// so following two lines might need to be wrapped in some sort of begin, end batch operation:
  elements.ForEach((e)=>e.AddEventListener("ontransitioned", transitionFinished));
  elements.ForEach((e)=>e.ToggleClass("fadeout")); // css for that will start the fade out transition
}
}

It looks like this fairly simple fade out requirement is forcing me into the deeper parts of the framework where I don't particular have the expertise or competence to be. However seeing as I am here, any suggestions on how I can navigate my way through and back to safety whilst achieving the fade out effect I am after would be welcomed :-)

[Arshia001]

@dazinator Maybe I'm missing something, but why doesn't this (or something similar) work?

<div style="opacity: 0.5">
    <SomeElement />
</div>

[dazinator]

@Arshia001 the fade effect I am applying is a transition which means it has a duration, I.e it goes from 1 opacity to 0 opacity over x seconds. I can easily start this transition off by toggling a css class when I am ready to start fading the element out. However I need to know when the transitions finished before I remove the element from the DOM. Your example above just sets an opacity it doesnt fade it out over time.. or perhaps I am missing something?

[justcallmeM]

@danroth27 I didn't want to use JS, thats why I chose Blazor. But thanks for the info!

[dazinator]

I settled on a solution that was a bit of a compromise for fading out elements before removing them from the DOM, i've shared it over here: #10389

[chendjouCaleb]

you can design an adapter between Blazor and DOM Js using the JsInterop

[Arshia001]

@dazinator you'll want to use css classes to create the fade animation. You can't really have an element just pop out of existence, you must also think of something as to how to rest of the page will realign itself, so that also goes in css. By the end of it, the element will be gone for good, you don't need to remove it. You can probably set a timer in C# code to remove the element from the render tree as well, but I don't see why it'll be necessary.

[dazinator]

You can probably set a timer in C# code to remove the element from the render tree as well, but I don't see why it'll be necessary.

That's the approach I used. I dont like the idea of keeping irrelevant components as part of my render tree - I want to remove stuff from the render tree but fade them out as a consequence of removing them. You may not feel its necessary to remove hidden html from the blazor rendertree and strictly that is true, however adding and removing things from the render tree is not a bad practice, in fact - this is just how blazor is designed to work. Having to keep all html that is removed from the DOM as part of the render tree is a code smell in my opinion and you have to ask why that is necessary - it's a gap in the blazor framework at the moment imho. The timer based workaround / approach I'm happier with though - as you can see I already shared a solution based on that above although I have already had to make a few tweaks to the code I shared the basis mechanism works.

[matthewpetch]

Blazor still does allow you to directly reach DOM elements if you want via its JS interop APIs (see https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0) but you should only do that for exceptional custom things, not for routine UI rendering.

Exceptional custom things like.... focusing an element? Because I cannot find a way to do this without JS interop