Closed lcichanowicz closed 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?
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.
Thanks for the swift attention, @javiercn. That makes a strange bit of rendered markup.
@lcichanowicz I meant ! only on the start tag, sorry.
Ah, VS 2022 did that auto-matching of the closing tag. It behaves similarly.
@lcichanowicz thanks for the additional details.
This seems like a bug in the logic we have to apply the scope.
@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:
header
form
option
(the select does get the string)thead
Interestingly, many of the elements that do have tag helpers available do get the CSS-isolation magic string.
anchor
tagimage
taginput
taglabel
tagselect
tagThis 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 & 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>
Any update on this?
Looks like a duplicate of https://github.com/dotnet/razor/issues/9034.
Is there an existing issue for this?
Describe the bug
The "
b-
" attribute is not added to theheader
element in the_Layout.cshtml
file (Razor Pages project) when it is rendered; however, the "b-
" attribute is added to aheader
element selector in the_Layout.cshtml.css
file when rendered.Expected Behavior
The "
b-
" attribute should be added to theheader
element when rendered. The explanation in https://github.com/dotnet/aspnetcore/issues/41507 does not seem to apply here, because that issue is for animg
element, which does have a tag helper; however theheader
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 theheader
element.Add a CSS rule to
_Layout.cshtml.css
targeting theheader
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'sheader
selector, causing it to not match the associatedheader
element on the rendered HTML page.Exceptions (if any)
No response
.NET Version
7.0.102
Anything else?
No response