dotnet / razor

Compiler and tooling experience for Razor ASP.NET Core apps in Visual Studio, Visual Studio for Mac, and VS Code.
https://asp.net
MIT License
504 stars 195 forks source link

CSS isolation support in ASP.NET Core 6.0 for header element #8710

Closed lcichanowicz closed 1 year ago

lcichanowicz commented 1 year ago

Is there an existing issue for this?

Describe the bug

The "b-" attribute is not added to the header element in the _Layout.cshtml file (Razor Pages project) when it is rendered; however, the "b-" attribute is added to a header element selector in the _Layout.cshtml.css file when rendered.

Expected Behavior

The "b-" attribute should be added to the header element when rendered. The explanation in https://github.com/dotnet/aspnetcore/issues/41507 does not seem to apply here, because that issue is for an img element, which does have a tag helper; however the header element does not have a tag helper in Razor Pages.

https://www.learnrazorpages.com/razor-pages/tag-helpers/

Steps To Reproduce

Create a new Razor Pages project. Run it. Inspect the header in browser dev tools. There is no "b-" attribute on the header element.

Add a CSS rule to _Layout.cshtml.css targeting the header element with an element selector.

header { color: red }

Inspect the rendered CSS in dev tools. There is a "b-" attribute on the new CSS rule's header selector, causing it to not match the associated header element on the rendered HTML page.

Exceptions (if any)

No response

.NET Version

7.0.102

Anything else?

No response

javiercn commented 1 year ago

@lcichanowicz thanks for contacting us.

Does the attribute get emitted if you use <!header on the element that is not getting the attribute applied?

ghost commented 1 year ago

Hi @lcichanowicz. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

lcichanowicz commented 1 year ago

Thanks for the swift attention, @javiercn. That makes a strange bit of rendered markup.

image

image

javiercn commented 1 year ago

@lcichanowicz I meant ! only on the start tag, sorry.

lcichanowicz commented 1 year ago

Ah, VS 2022 did that auto-matching of the closing tag. It behaves similarly.

image

image

javiercn commented 1 year ago

@lcichanowicz thanks for the additional details.

This seems like a bug in the logic we have to apply the scope.

lcichanowicz commented 1 year ago

@javiercn, I have been meaning to do a more thorough test, of all HTML5 elements. I found such a project on GitHub (https://github.com/mrmrs/html), which is simply an HTML doc with all non-media HTML5 elements. I pasted that raw HTML into a Razor Pages page, which had a scoped CSS file (.cshtml.css). Then, I copied the rendered source from that webpage, pasted it into RegExBuddy, and crafted a quick regex (<[a-z\d]+(?![^>]+b-zagw7xpmhb).*?>) to highlight elements (opening tags) that lacked the unique CSS-isolation string (b-zagw7xpmhb).

Here is a link to the "codepen" for the regex on regex101.com https://regex101.com/r/rCShpt/1

Here is the list of elements, inside the body element, that do not get the magic string needed for CSS isolation:

  1. header
  2. form
  3. option (the select does get the string)
  4. thead

Interestingly, many of the elements that do have tag helpers available do get the CSS-isolation magic string.

  1. anchor tag
  2. image tag
  3. input tag
  4. label tag
  5. select tag

This seems to clarify that the CSS-isolation will work for those elements so long as no tag helpers are actually used on the element. In which case, all four elements in the first list (header, form, option, and thead) should be getting the CSS-isolation magic string, in the document below.

Here is the rendered HTML I used.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- Set the title of your site here -->
    <title> HTML Patterns </title>

    <meta name="author" content="mrmrs">
    <meta name="description" content="Common HTML patterns">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Link to your stylesheet here
    <link rel="stylesheet" href="css/i.css">

    Favicons and Touch Device Icons
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="touch-icon-iphone-precomposed.png">
    <link rel="apple-touch-icon" sizes="72x72"   href="touch-icon-ipad-precomposed.png">
    <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina-precomposed.png">
    <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina-precomposed.png">
    -->
</head>

<body>

    <header>
        <h1 b-zagw7xpmhb>HTML</h1>
        <h2 b-zagw7xpmhb>Every html element in one place. Just waiting to be styled.</h2>
    </header>

    <!--

    HTML - Common patterns

    Add your own modules and components for easy theme styling,
    copy the partials for building a prototype. Or just read
    the comments to familiarize yourself with HTML.

    -->

    <header>
        <a b-zagw7xpmhb href="" title="Site title"><h1 b-zagw7xpmhb>Site title</h1></a>
        <nav b-zagw7xpmhb>
            <ul b-zagw7xpmhb>
                <li b-zagw7xpmhb> <a b-zagw7xpmhb href="#" title="Home">Home</a> </li>
                <li b-zagw7xpmhb> <a b-zagw7xpmhb href="#" title="About">About</a> </li>
                <li b-zagw7xpmhb> <a b-zagw7xpmhb href="#" title="Sign Up">Sign Up</a> </li>
                <li b-zagw7xpmhb> <a b-zagw7xpmhb href="#" title="Contact">Contact</a> </li>
                <li b-zagw7xpmhb> <a b-zagw7xpmhb href="#" title="Careers">Careers</a> </li>
            </ul>
        </nav>
    </header>

    <section b-zagw7xpmhb>
        <h1 b-zagw7xpmhb>Headings &amp; Copy</h1>
        <h1 b-zagw7xpmhb>First Header h1</h1>
        <p b-zagw7xpmhb>
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
            praesentium voluptatum deleniti atque corrupti quos.
        </p>
        <h2 b-zagw7xpmhb>Second header h2</h2>
        <p b-zagw7xpmhb>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <h3 b-zagw7xpmhb>Third header h3</h3>
        <p b-zagw7xpmhb>
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
            praesentium voluptatum deleniti atque corrupti quos dolores et quas
            molestias excepturi sint occaecati cupiditate non provident, similique sunt
            in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
            fuga. Et harum quidem rerum facilis est et expedita distinctio.
        </p>
        <h4 b-zagw7xpmhb>Fourth header h4</h4>
        <p b-zagw7xpmhb>
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
            consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
            ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
            veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
            ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
            qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
            qui dolorem eum fugiat quo voluptas nulla pariatur?"
        </p>
        <h5 b-zagw7xpmhb>Fifth header h5</h5>
        <p b-zagw7xpmhb>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
            veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
            consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
        </p>
        <h6 b-zagw7xpmhb>Sixth header h6</h6>
        <p b-zagw7xpmhb>
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
            praesentium voluptatum deleniti atque corrupti quos.
        </p>
    </section>
    <hr b-zagw7xpmhb />
    <section b-zagw7xpmhb>
        <h1 b-zagw7xpmhb>Links</h1>
        <a b-zagw7xpmhb href="#">Sample text link</a>
        <a b-zagw7xpmhb href="#">Sample button link</a>
    </section>
    <hr b-zagw7xpmhb />
    <section b-zagw7xpmhb>
        <h1 b-zagw7xpmhb>Lists</h1>
        <h2 b-zagw7xpmhb>Unordered list</h2>
        <ul b-zagw7xpmhb>
            <li b-zagw7xpmhb>Orange</li>
            <li b-zagw7xpmhb>Apple</li>
            <li b-zagw7xpmhb>Rhubarb</li>
            <li b-zagw7xpmhb>Rasberry</li>
            <li b-zagw7xpmhb>Blueberry</li>
            <li b-zagw7xpmhb>Cherry</li>
        </ul>
        <h2 b-zagw7xpmhb>Ordered list</h2>
        <ol b-zagw7xpmhb>
            <li b-zagw7xpmhb>First</li>
            <li b-zagw7xpmhb>Second</li>
            <li b-zagw7xpmhb>Third</li>
            <li b-zagw7xpmhb>Fourth</li>
            <li b-zagw7xpmhb>Fifth</li>
            <li b-zagw7xpmhb>Sixth</li>
        </ol>
        <h2 b-zagw7xpmhb>Definition list</h2>
        <dl b-zagw7xpmhb>
            <dt b-zagw7xpmhb>
                Kick
            </dt>
            <dd b-zagw7xpmhb>
                808
            </dd>
            <dt b-zagw7xpmhb>
                Snare
            </dt>
            <dd b-zagw7xpmhb>
                909
            </dd>
        </dl>
        <dl b-zagw7xpmhb>
            <dt b-zagw7xpmhb> Maine </dt>
            <dd b-zagw7xpmhb> Augusta </dd>
            <dt b-zagw7xpmhb> California </dt>
            <dd b-zagw7xpmhb> Sacremento </dd>
            <dt b-zagw7xpmhb> Oregon </dt>
            <dd b-zagw7xpmhb> Salem </dd>
            <dt b-zagw7xpmhb> New York </dt>
            <dd b-zagw7xpmhb> Albany </dd>
        </dl>
        <dl b-zagw7xpmhb>
            <dt b-zagw7xpmhb> Ascender </dt>
            <dd b-zagw7xpmhb> The part of certain lowercase letters that extends above the x-height of a font.  </dd>
            <dt b-zagw7xpmhb> Font </dt>
            <dd b-zagw7xpmhb>
                Traditionally, a complete set of characters for one typeface at
                one particular type size. Often used more loosely as a synonym for
                "typeface".
            </dd>
            <dt b-zagw7xpmhb> Golden Section </dt>
            <dd b-zagw7xpmhb>
                The ideal proportion according to the ancient Greeks. It is visualized as the
                division of a line into two unequal segments in such a way that the ratio of the
                smaller segment to the larger segment is equal to the ratio of the larger to the
                whole. It is usually defined as 21:34, that is, 21/34 and 34/(21+34) both equal
                approximately 0.618. A rectangle whose sides are of this proportion is called a
                "golden rectangle". Golden rectangles can be found in the proportions of the
                Parthenon and many medieval manuscripts.
            </dd>
        </dl>
    </section>

    <section b-zagw7xpmhb>
        <h1 b-zagw7xpmhb>Forms</h1>
        <form>
            <fieldset b-zagw7xpmhb>
                <!--
                Every fieldset must contain a legend. IE barfs if it's not there.
                It's no fun.
                -->
                <legend b-zagw7xpmhb>Legend Example</legend>

                <div b-zagw7xpmhb>
                    <label b-zagw7xpmhb>Text Input Label</label>
                    <input b-zagw7xpmhb type="text" />
                    <p b-zagw7xpmhb>Helper text if necessary.</p>
                </div>

                <div b-zagw7xpmhb>
                    <label b-zagw7xpmhb>Password</label>
                    <input b-zagw7xpmhb type="password" />
                    <p b-zagw7xpmhb>Error messages when appropriate.</p>
                </div>

                <div b-zagw7xpmhb>
                    <label b-zagw7xpmhb for="first-name">First Name</label>
                    <input b-zagw7xpmhb type="text" id="first-name" />
                </div>

                <div b-zagw7xpmhb>
                    <label b-zagw7xpmhb for="last-name">Last Name</label>
                    <input b-zagw7xpmhb type="text" id="last-name" />
                </div>

                <div b-zagw7xpmhb>
                    <label b-zagw7xpmhb for="email">Email</label>
                    <input b-zagw7xpmhb type="email" id="email" />
                </div>

                <div b-zagw7xpmhb>
                    <label b-zagw7xpmhb for="gender">Dropdown</label>
                    <select b-zagw7xpmhb>
                        <option>Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                    </select>
                </div>

                <div b-zagw7xpmhb>
                    <label b-zagw7xpmhb>Radio Buttons</label>
                    <ul b-zagw7xpmhb>
                        <li b-zagw7xpmhb><label b-zagw7xpmhb><input b-zagw7xpmhb type="radio" /> Label 1</label></li>
                        <li b-zagw7xpmhb><label b-zagw7xpmhb><input b-zagw7xpmhb type="radio" /> Label 2</label></li>
                        <li b-zagw7xpmhb><label b-zagw7xpmhb><input b-zagw7xpmhb type="radio" /> Label 3</label></li>
                    </ul>
                </div>

                <div b-zagw7xpmhb>
                    <label b-zagw7xpmhb for="url">URL Input</label>
                    <input b-zagw7xpmhb type="url" placeholder="http://mrmrs.cc" />
                </div>

                <div b-zagw7xpmhb>
                    <label b-zagw7xpmhb>Text area</label>
                    <textarea b-zagw7xpmhb></textarea>
                </div>

                <div b-zagw7xpmhb>
                    <label b-zagw7xpmhb><input b-zagw7xpmhb type="checkbox" /> This is a checkbox.</label>
                </div>

                <div b-zagw7xpmhb>
                    <input b-zagw7xpmhb type="submit" value="Submit" />
                </div>

            </fieldset>
        </form>
    </section>
    <section b-zagw7xpmhb>
        <h1 b-zagw7xpmhb>Buttons</h1>
        <button b-zagw7xpmhb>A button</button>
        <button b-zagw7xpmhb>A button</button>
        <button b-zagw7xpmhb>A large button</button>
    </section>
    <hr b-zagw7xpmhb />
    <section b-zagw7xpmhb>
        <h1 b-zagw7xpmhb>An Example Article</h1>
        <article b-zagw7xpmhb>
            <h1 b-zagw7xpmhb>Title</h1>
            <p b-zagw7xpmhb>
                Lorem ipsum dolor sit amet, <b b-zagw7xpmhb>consectetur adipisicing elit</b>, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud <em b-zagw7xpmhb>
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat
                </em>. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <blockquote b-zagw7xpmhb>
                <p b-zagw7xpmhb>
                    This is a GREAT pull quote.
                </p>
                <a b-zagw7xpmhb href="#">- Author</a>
            </blockquote>
            <p b-zagw7xpmhb>
                Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
                consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
                ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
                veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
                ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
                qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
                qui dolorem eum fugiat quo voluptas nulla pariatur?"
            </p>
            <p b-zagw7xpmhb>
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                praesentium voluptatum deleniti atque corrupti quos dolores et quas
                molestias excepturi sint occaecati cupiditate non provident, similique sunt
                in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
                fuga. Et harum quidem rerum facilis est et expedita distinctio.
            </p>
        </article>
    </section>
    <hr b-zagw7xpmhb />

    <section b-zagw7xpmhb>
        <h1 b-zagw7xpmhb>Code examples</h1>
        <code b-zagw7xpmhb>
            <pre b-zagw7xpmhb>
      sudo ipfw pipe 1 config bw 256KByte/s
      sudo ipfw add 1 pipe 1 src-port 3000
    </pre>
        </code>
    </section>
    <hr b-zagw7xpmhb />
    <section b-zagw7xpmhb>
        <h1 b-zagw7xpmhb>Footer</h1>
        <footer b-zagw7xpmhb>
            <p b-zagw7xpmhb>Copyright 2013. Made with love by <a b-zagw7xpmhb href="http://mrmrs.cc" title="MRMRS - Designer">mrmrs</a>.</p>
            <ul b-zagw7xpmhb>
                <li b-zagw7xpmhb>
                    <a b-zagw7xpmhb href="#">Home</a>
                </li>
                <li b-zagw7xpmhb>
                    <a b-zagw7xpmhb href="#">Contact</a>
                </li>
                <li b-zagw7xpmhb>
                    <a b-zagw7xpmhb href="#">Jobs</a>
                </li>
            </ul>
            <ul b-zagw7xpmhb>
                <li b-zagw7xpmhb>
                    <a b-zagw7xpmhb href="http://twitter.com" title=" on Twitter">Twitter</a>
                </li>
                <li b-zagw7xpmhb>
                    <a b-zagw7xpmhb href="http://pinterest.com" title=" on Pinterest">Pinterest</a>
                </li>
                <li b-zagw7xpmhb>
                    <a b-zagw7xpmhb href="http://instagram.com" title=" on Instagram">Instagram</a>
                </li>
                <li b-zagw7xpmhb>
                    <a b-zagw7xpmhb href="http://dribbbble.com" title=" on Dribbble">Dribbble</a>
                </li>
                <li b-zagw7xpmhb>
                    <a b-zagw7xpmhb href="http://github.com" title=" on Github">Github</a>
                </li>
            </ul>
        </footer>
    </section>

    <section b-zagw7xpmhb>
        <h1 b-zagw7xpmhb>New hawtness</h1>
        <progress b-zagw7xpmhb value="80" max="100">80 %</progress>
        <p b-zagw7xpmhb>We are this close to the goal: <meter b-zagw7xpmhb min="0" max="1000" value="824">$824</meter>.</p>
    </section>

    <section b-zagw7xpmhb>
        <header>
            <h1 b-zagw7xpmhb>Random Stuff</h1>
        </header>
        <small b-zagw7xpmhb>This is for things like copyright info</small>
        <s b-zagw7xpmhb>Content that isn't accurate or relevant anymore.</s>
        <span b-zagw7xpmhb>Generic span wrapper</span>
        <abbr b-zagw7xpmhb>HTML How to meet ladies</abbr>
        <p b-zagw7xpmhb>This is inline text with <sub b-zagw7xpmhb>subscript</sub> and <sup b-zagw7xpmhb>superscript</sup> elements.</p>
        <p b-zagw7xpmhb>
            <var b-zagw7xpmhb>f</var>(<var b-zagw7xpmhb>x</var>) = <var b-zagw7xpmhb>a</var><sub b-zagw7xpmhb>0</sub> + <var b-zagw7xpmhb>a</var><sub b-zagw7xpmhb>1</sub><var b-zagw7xpmhb>x</var> +
            <var b-zagw7xpmhb>a</var><sub b-zagw7xpmhb>2</sub><var b-zagw7xpmhb>x</var><sup b-zagw7xpmhb>2</sup>, where <var b-zagw7xpmhb>a</var><sup b-zagw7xpmhb>2</sup> ≠ 0
        </p>
        <time b-zagw7xpmhb datetime="2013-09-07" pubdate>07 September 2013</time>
    </section>

    <section b-zagw7xpmhb>
        <figure b-zagw7xpmhb>
            <img b-zagw7xpmhb src="http://placekitten.com/g/960/320" alt="Figure Example">
            <figcaption b-zagw7xpmhb>
                Photo of the sky at night. Original by <a b-zagw7xpmhb href="http://flickr.com/photos/heyitsadam/">@mrmrs</a>
            </figcaption>
        </figure>
    </section>

    <section b-zagw7xpmhb>
        <!--
        http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-samp-element
        -->
        <samp b-zagw7xpmhb>
            <pre b-zagw7xpmhb>
          /Sites/html master  ☠ ☢
          $  <kbd b-zagw7xpmhb>ls -gto</kbd>

          total 104
          -rw-r--r--   1   10779 Jun  5 16:24 index.html
          -rw-r--r--   1    1255 Jun  5 16:00 _config.yml
          drwxr-xr-x  11     374 Jun  5 15:57 _site
          -rw-r--r--   1    1597 Jun  5 14:16 README.md
          drwxr-xr-x   5     170 Jun  5 14:15 _sass
          -rw-r--r--   1     564 Jun  4 15:59 Rakefile
          drwxr-xr-x   6     204 Jun  4 15:59 _includes
          drwxr-xr-x   4     136 Jun  4 15:59 _layouts
          drwxr-xr-x   3     102 Jun  4 15:59 _resources
          drwxr-xr-x   3     102 Jun  4 15:59 css
          -rw-r--r--   1    1977 Jun  4 15:59 favicon.icns
          -rw-r--r--   1    6518 Jun  4 15:59 favicon.ico
          -rw-r--r--   1    1250 Jun  4 15:59 touch-icon-ipad-precomposed.png
          -rw-r--r--   1    2203 Jun  4 15:59 touch-icon-ipad-retina-precomposed.png
          -rw-r--r--   1    1046 Jun  4 15:59 touch-icon-iphone-precomposed.png
          -rw-r--r--   1    1779 Jun  4 15:59 touch-icon-iphone-retina-precomposed.png
        </pre>
        </samp>
    </section>
    <section b-zagw7xpmhb>
        <h1 b-zagw7xpmhb>Tables</h1>
        <!--
        From the HTML spec (http://www.w3.org/TR/html401/struct/tables.html)

        TFOOT must appear before TBODY within a TABLE definition so that user agents can
        render the foot before receiving all of the (potentially numerous) rows of data.
        The following summarizes which tags are required and which may be omitted:

        The TBODY start tag is always required except when the table contains only one
        table body and no table head or foot sections. The TBODY end tag may always be
        safely omitted.

        The start tags for THEAD and TFOOT are required when the table head and foot sections
        are present respectively, but the corresponding end tags may always be safely
        omitted.

        Conforming user agent parsers must obey these rules for reasons of backward
        compatibility.
        -->
        <table b-zagw7xpmhb>
            <caption b-zagw7xpmhb>This is a caption for a table</caption>
            <thead>
                <tr b-zagw7xpmhb>
                    <th b-zagw7xpmhb>ID</th>
                    <th b-zagw7xpmhb>Name</th>
                    <th b-zagw7xpmhb>Date</th>
                    <th b-zagw7xpmhb>Address</th>
                </tr>
            </thead>
            <tfoot b-zagw7xpmhb>
                <tr b-zagw7xpmhb>
                    <td b-zagw7xpmhb>Table footer info</td>
                </tr>
            </tfoot>
            <tbody b-zagw7xpmhb>
                <tr b-zagw7xpmhb>
                    <td b-zagw7xpmhb>#999-32ac</td>
                    <td b-zagw7xpmhb>First Name</td>
                    <td b-zagw7xpmhb>13 May, 2013</td>
                    <td b-zagw7xpmhb>999 Spruce Lane, Somewhere, CA 94101</td>
                </tr>
                <tr b-zagw7xpmhb>
                    <td b-zagw7xpmhb>#888-32dd</td>
                    <td b-zagw7xpmhb>Sample Name</td>
                    <td b-zagw7xpmhb>17 May, 1984</td>
                    <td b-zagw7xpmhb>999 Spruce Lane, Somewhere, CA 94101</td>
                </tr>
            </tbody>
        </table>
    </section>
    <section b-zagw7xpmhb>
        <h1 b-zagw7xpmhb>Footer</h1>
        <footer b-zagw7xpmhb>
            <small b-zagw7xpmhb>© 2014 Some company name</small>
            <address b-zagw7xpmhb>email@email.com</address>
        </footer>
    </section>

    <!-- Visual Studio Browser Link -->
    <script type="text/javascript" src="/_vs/browserLink" async="async" id="__browserLink_initializationData" data-requestId="bc91d565f45244c2ac89f7849971a912" data-requestMappingFromServer="false" data-connectUrl="http://localhost:62248/68633bad5d0a41179b709f76c140a2f6/browserLink"></script>
    <!-- End Browser Link -->

    <script src="/_framework/aspnetcore-browser-refresh.js"></script>
</body>
</html>
Bartmax commented 1 year ago

Any update on this?

jjonescz commented 1 year ago

Looks like a duplicate of https://github.com/dotnet/razor/issues/9034.