[selectors] Modifier for attribute selectors to split values into words

[SebastianZ]

In #10001 (comment) @paceaux suggested to introduce a new modifier w that changes the value matching to take word boundaries into account.

Taking the example from that comment, the selector

[class^="foo" w]

allows to match all of

<div class="foo-bar">
<div class="foo bar">
<div class="bar foo">
<div class="bar foo--baz">

Though it is not restricted to word prefixes. It could be used in any attribute selector.

So here are some more examples:

Matching suffixes is done via

[data-values$="bar" w]

matches

<div data-values="foo-bar">
<div data-values="foo-bar baz">
<div data-values="foo bar baz">
<div data-values="foobar baz">

Exact word matching (equivalent to [attr~=value]):

[data-values="foo" w]

matches

<div data-values="foo">
<div data-values="bar foo">
<div data-values="foo bar">
<div data-values="bar foo baz">

but not

<div data-values="foobar">
<div data-values="foo-bar">
<div data-values="barfoo">
<div data-values="bar-foo">

Applied to |=:

[data-values|="foo" w]

matches

<div data-values="foo">
<div data-values="foo-bar">
<div data-values="baz foo">
<div data-values="baz foo-bar">
<div data-values="bar foo baz">
<div data-values="bar foo-baz biz">

but not

<div data-values="foobar">
<div data-values="barfoo">

This can be seen as a counter-proposal to #14289 and covers more use cases than the ones outlined there.

Sebastian

[paceaux]

Thanks @SebastianZ ! I'd like to call out that with the w flag, that puts it in the same category as i for ignore case and s for include case that they're "flags" for identification.

I think it's important that those not be excluded.

So I would suggest that the case flags be able to apply to the word flag, and that order not matter

e.g.:

[class^="Foo" ws], 
[class^="Foo" sw]

would either one match all of

<div class="Foo-bar">
<div class="Foo bar">
<div class="bar Foo">
<div class="bar Foo--baz">

But not any of

<div class="foo-bar">
<div class="foo bar">
<div class="bar foo">
<div class="bar foo--baz">