TagHelper attributes with data- have surprising behavior

[rynowak]

Consider the following:

@{ var pwnt = "Hello, world!"; }
<p data-th-color="color: red; @pwnt">
            This should be red.
</p>


[TargetElement("p", Attributes = "data-th-color")]
    public class ColorTagHelper : TagHelper
    {
        [HtmlAttributeName("data-th-color")]
        public string Color { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.Attributes.Add("style", Color);
        }
    }

Inside the taghelper, the value of Color is "Hello, world!" instead of the expected "color: red; Hello, world!". According to @NTaylorMullen this is because razor has special handling of data-* attributes.

Changing the attribute to something that doesn't begin with data- will give the expected behavior.

[dougbu]

whatever the special case is, the Principal of Least Surprise says Razor is broken here. either binding an attribute named data-* is an error or it should do the Right Thing:tm: i.e. behave like any other bound attribute.

[NTaylorMullen]

Agree.

Curious: @anurse why did we special case data- in Razor?

[analogrelay]

We special-cased it for conditional attributes. Conditional attributes are designed to make it easier to write HTML that User Agents can properly interpret. We do this by making checked="@foo" render as checked="checked" if foo is true, or removing it entirely if foo is false or null.

However, data- attributes are explicitly called out as being reserved solely for the purpose of the end-application-developer:

These attributes are not intended for use by software that is not known to the administrators of the site that uses the attributes. For generic extensions that are to be used by multiple independent tools, either this specification should be extended to provide the feature explicitly, or a technology like microdata should be used (with a standardised vocabulary). (http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes)

Thus, they are explicitly not implemented by User Agents and we didn't want conditional attributes getting in the way of existing application code (and making something like data-enabled="@foo" suddenly vanish while the JavaScript that reads it expected a literal string false).

For a similar reason, I think we should take @dougbu 's first suggestion here and disallow binding Tag Helpers to data- attributes.

[NTaylorMullen]

@DamianEdwards do you feel like we should be able to bind data- attributes? Or should it result in an error?

[NTaylorMullen]

Note: Decision was to not allow TagHelper authors to bind to attributes starting with data-. If they try to we will create an error.