Greasy Fork

Seems not work on : https://mdn.github.io/web-components-examples/host-selectors/

my test: I tested too in Chrome, related to :host-context() (not supported in Firefox)

/* = TEST Shadow DOM - Host selectors example - NOT WORK
https://developer.mozilla.org/en-US/docs/Web/CSS/:host_function
*/

:host { 
    background: blue!important;
}
:host-context(h1)::after { 
    content: " - XXX no links in headers!" 
}

span:hover { 
    text-decoration: underline; 
}
:host-context(h1) { 
    font-style: italic; 
}




:host-context(article, aside) { 
    color: green !important;
}
:host(.footer) { 
    color : yellow !important;
}

Have you other test links where your script work ?

Hey, thanks for the feedback. I took a look and I will try to explain each selector to you.

All tests were done in Chrome 140.0.7339.208:

Working fine

Also working fine

Working fine, the text is already italic

There was a problem with your selector :host-context(article, aside). The :host-context function only evaluates one selector at a time, so you need to split it into two selectors:

:host-context(article) { 
    color: green !important;
}
:host-context(aside) { 
    color: green !important;
}

Working fine

Thanks for the time to reply :-)

But i don't understand why it's ont working for me...

I tested in a new profile of Chrome (with only Tampermonkey an your script + Stylus Version
2.3.16)

and your simple code example (and the others too) not work with an USERCSS or Normal editor:

:host-context(article) {
color: green !important;
}
:host-context(aside) {
color: green !important;
}


If, to test just Stylus, i do:

article {
background: blue!important;
}

that's good (of course...)

Note:
I tested too with all advanced settings of Stylus checked (CSP / Iframe etc...), and that's the same.

No idea why i can't make your css examples working in Chrome.

But thank for the precision about (and i keep it in mind the fact that :host-context work only in Chrome):

:host-context(article, aside).
The :host-context function only evaluates one selector at a time,
so you need to split it into two selectors.

Can you check if Stylus allows circumventing CSP 'style-src' through adoptedStyleSheets

Can you check if Stylus allows circumventing CSP 'style-src' through adoptedStyleSheets

Yes, when i tested to enable all the advanced settings.

So it's disabled, and still not working? I've never seen it. Sorry, but I can't figure out what's happening.

Me tooo....
enable or not that's the same.
I never noticied that before (tested on 3 different profiles in Chrome, that's the same - no problem with Firefox)
And the way to enable it they give in info popup 🛠 seems too complicated for me now :-)

Oh, I see, that popup is for the option above.

(tested on 3 different profiles in Chrome, same result – no problem with Firefox)

It's very uncommon, I tried in Chrome, Edge, and Firefox, all of them working fine.