[PROPOSAL] Support DOM properties binding as HTML attribute.

[montyclt]

A DOM object has attributes (set by HTML attributes) and properties, set or get by dot notation in DOM object.

An example:

// HTML
<input id="name" value="Monty" />

// Assume I render the page and change the content of textbox from Monty to Anna.

// JavaScript
var name = document.getElementById("name");

name.getAttribute("value"); // Monty
name.value; // Anna

As see, the value of the attribute is not the same than the property.

Because the text of textbox rendered by input tag is in the property and not in the HTML attribute, if we bind the attribute and change the value of the bound field, nothing occurs in rendered textfield.

<input value"@Name" id="name" />

@functions
{
    public string Name = "Monty";
}

If we use value instead of bind attribute, if Name field change, nothing is reflected in rendered textfield.

I propose a syntax to bind field to DOM property.

An possible example:

<input $value="@Name" />

This syntax, bind Name field to DOM property instead of HTML attribute.

Why?

• Consistency, instead of new attribute called bind, you know what is binding really.
• Some webcomponents, use new properties, for example:

// HTML
<my-calendar id="calendar" />

// JavaScript
var calendar = document.getElementById("calendar");
calendar.day; // 13
calendar.month; //4
calendar.year; // 2017
calendar.value; // undefined

In this case, I can't use bind attribute, but I can do:

<my-calendar $day="Day" $month="Month" $year="Year" />

@functions
{
    public int Day { get; set; }
    public int Month { get; set; }
    public int Year { get; set; }
}

[olavorn]

I agree that this is a versatille way to interact with DOM, but there are some aspects to consider:

1- DOM attribute changes may cause excessive repaints/redraws, should be used carefully.
2- Two way binding expects changes in attributes via javascript or other to apply to Blazor objects, in many cases other than value attribute and a tiny set of nodes, this may not occur, and it's a pathway to fundamental flaws cause it will be relying on browser events.

[mkArtakMSFT]

@SteveSandersonMS what are your thoughts regarding this? Is this something we'd ever do? If not, feel free to close it.

[SteveSandersonMS]

I think at this point it's best to close it.

It's possible that one day we'll do something to support addressing DOM element properties directly, but so far this is an extremely niche request. People are routinely building complex apps without needing this or ever considering that they might. We would strongly prefer to avoid introducing this entire conceptual area if it's avoidable, since it's the sort of thing that people will constantly be confused over (when to use attributes vs properties).

If the only use cases for it are when interacting with 3rd-party JS libraries, then it might be that developers have good opportunities to make whatever DOM property mutations they want as part of the existing JS interop logic they need to write.

This is not to dismiss the validity of the feature request altogether! I know there may be cases where it's inconvenient not to have it. If anyone has compelling use cases, I'd strongly appreciate it if you could post them. Be sure to describe it in an end-to-end way (which 3rd-party components you're trying to use, why they need you to modify DOM properties, etc.).

So for now I'll close this, and we will watch out for whether others report similar requirements, or what other examples of its necessity are posted. Hope that makes sense.

[montyclt]

Hello @SteveSandersonMS,

When I opened this issue, I was experimenting with 3rd-party web components made with Polymer. I remember some components that input more than a single value using properties. I remember a date picker component that works like this:

<date-picker id="my-date-picker"></datepicker>

var datePicker = document.getElementById("my-date-picker");
var day = datePicker.day;
var month = datePicker.month;
var year = datePicker.year;

Today, I don't use webcomponents, and in the case that I need a date picker in Razor Components, I will use a Razor Component instead of web component.