JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <!--
        data-field-a should be a parse error because
            the character reference is missing the
            semicolon at the end, and has no characters
            after it.
        data-field-b should be valid because
            while missing the semicolon at the end, it's
            followed by alphanumeric text in an attribute.
        data-field-c should be a parse error because
            it's a valid character reference minus the
            ending semicolon followed by an equal sign
            in an attribute.
        data-field-d should be valid and is here as a baseline.
    -->
    <a
        data-field-a="&amp"
        data-field-b="&ampup"
        data-field-c="&amp=error"
        data-field-d="&amp;"
        id="link"
        href="?something&amp=Amp&quot=Something">
            Link
    </a>
    <ul>
        <li>
            <!-- Valid -->
            &amp;
        </li>
        <li>
            <!-- Parse Error - Missing semicolon at the end -->
            &amp
        </li>
        <li>
            <!-- Parse Error - Same as prior, and not in attribute -->
            &amp=blah
        </li>
        <li>
            <!-- Parse Error - Same as prior -->
            &ampedup
        </li>
    </ul>
</div>


<p>Open the Web Console for more output</p>

JavaScript

console.dir(link.dataset);