[csswg-drafts] [css-nesting] concat and custom elements example/reasoning (#6682)

bkardell has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-nesting] concat and custom elements example/reasoning ==
In the nesting draft, [section 2.1 Direct Nesting](https://drafts.csswg.org/css-nesting/#direct) provides both rationale and examples about why things work how they do.  In this is states:

>  __bar, for example, is a valid custom element name in HTML.

It links to the HTML spec (it is a general link, but here is [the relevant anchor part](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name)).  But, that isn't a valid custom element name, as the link shows (you can also verify in devtools if you find it hard to read those productions `customElements.define("__foo", class Foo extends HTMLElement {})` throws with ""__foo" is not a valid custom element name".

I _think_ what this means to say is simply `--` rather than `__`, and indeed the BEM site has examples like `.block--mod`. It's temping to just log that this is probably a typo, but... is that the only issue? I'm not sure... 

A single dash in custom element names is kind of the norm, and incredibly common in css selectors, even if you don't use BEM or something... That's a good example here, I guess.  But while the double dash example 'holds up', it is really obscure - I'm pretty sure most people don't even know that is a valid custom element name (there are certainly very few -- tens -- in the whole HTTPArchive, and they could be serialization/parsing errors on a common tool, and not even custom elements). So, that's got me thinking whether there are any other valid custom element names that might foul something up for selectors here and... maybe there is?  In reading the draft, I think we're trying to avoid here is concat'ing strings that might wind up be a tag name, and keep it to strictly selectors --  but `a.-foo` *is* a valid custom element name, and would mean something different for a selector... Does this create an issues?  It seems like even if it isn't, that one might be worth a note or example?



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6682 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 24 September 2021 14:13:27 UTC