Will Blazor ever have direct access to the DOM?

[RobertBouillon]

Overview

I like the Blazor approach to dynamic content for most use-cases, especially its support of MVVM. For reusable UI components, however, which may make frequent and specific changes to the DOM, the procedural layout of a Blazor component can be obtuse. I'm concerned that Blazor may not be widely-adopted if it's too difficult to implement components.

Early versions of WPF made the mistake of dictating a specific and 'better' way of writing components declaratively using XAML as opposed to procedurally with code, which they walked back in later versions (perhaps too late). I worry that Blazor may be repeating that mistake by restricting component development to Blazor syntax and denying access to the DOM.

I'd love to see Blazor support both Blazor syntax and DOM access.

Context

I'm writing a Blazor app and using jQuery components throughout. In most cases the jQuery components work well with minimal interop, retaining most of the original JS. In other cases I'm forced to convert the components to Blazor because Blazor wants control of the DOM and doesn't like it when the jQuery component changes it. In the latter case I often find myself struggling to convert the component.

Example

I'll provide a specific example I've encountered when trying to convert nestable list. The nestable list provides basic drag-and-drop functionality between two styled lists.

When dragging a list item, a new DOM element is created in the root. As the user moves their mouse, the element moves under the mouse, giving the appearance that the item has been dragged. The best way I found to mimic this behavior in Blazor:

@if(IsDragging)
{
  <div style='@DragStyle' class='drag-element'>
    <div style='list-item'>Element</div>
  </div>
}

<ol class='list'>
@foreach(var item in Items)
{
    <li><div class='list-item'>Element</div></li>
}
<ol>

Because the div is a child of the component, this can cause issues with inherited css styles. The div really needs to be created at the root document to guarantee proper behavior. I'm also forced to use JS Interop to hook into the document's mouse events.

Then there's the issue with "picking up" the element. The code for styling the list item has to be duplicated in the list AND the floating div (or created as a separate component * cringe *). None of this seems ideal.

With access to the DOM, this feature is trivial:

1. Create a new DOM element in the root.
2. Copy the DOM element being dragged to the new element
3. Replace the DOM element being dragged with a placeholder.

This is one of many examples where it's really taken me a lot of time to rethink how to solve a problem, and the Blazor approach ends up being inferior to the JS approach.