Inversely, I love, love, love how this "just works™️" in #chromium 😍
https://codepen.io/Westbrook/pen/XJKyebR
Where's my #webkit and #mozilla peeps at?!?
You're seeing that right, `:host(:has(...))` and `:host:has(...)` are different, in a good way, but supported differently across browsers, in a bad way. Let's go head a build ALL the things that are meant to be in the browser. Not just some.
Pretty please 🙏
#webDev #CSS #CSSWG #webComponentsCG #testTheWebForward #developingDesignSystems
Love, love, love how this "just works ™️" in #webkit and #mozilla 😍
https://codepen.io/Westbrook/pen/KwMrmwd
Where's my #chromium peeps at?!?
#webDev #CSS #CSSWG #webComponentsCG #testTheWebForward #developingDesignSystems
#playwright _IS_ a browser.
The fact that it cannot see what a browser sees is...disappointing, at best.
If the browser can build the correct AccessibiliTree from the code to pass on to the Assistive Technology of your visitors choice, why can't Playwright? I just want to test my apps that way an actual visitor would use them and not with some alternate interpretation. Alas.
@webkit my kingdom for a `scrollend` event?
Writing tests this Tuesday morning. 😁
Forgot how nice it is to _be sure_ the code your team writes works!
Because the world should be a slightly better place, and that includes the often greater that 1/3 of my week where working is happening, let people know how you feel about HTML at https://survey.devographics.com/en-US/survey/state-of-html/2025/ Future us's will thank us. 🤨
@webkit Also, while I'm here, #firefox #mozilla @FirefoxDevTools where's my support for `:host:has(...)` at!?!
Who can tell which is correct?
When visiting https://codepen.io/Westbrook/pen/gbpMbrb should there be four red squares (Blink) or four vertical red bars/lines (FF/WebKit)?
Not sure which is the bug to submit one. Help!
If you like this sort of #webComponents content, or are diving into consuming/developing a myriad of new or long standing APIs available as web components, come join the conversation around making them better at https://discord.gg/kbba8cKPg9
@matuzo Shadow DOM isn’t the only part of the platform that #webComponent popularity is adding pressure on automated tools to support. Things like Element Internals are getting left off the menu in many places, like https://github.com/dequelabs/axe-core/issues/4259, just as they and soon things like Reference Targets start to expand as well. 🥺
Perf test your website/app on cell service while you wait for you dentist. It’ll either feel horrible, getting you ready for the cleaning, or feel great, getting you ready for the cleaning. The change I’m making appears to give ~5s back to visitor by not rendering a bunch of unnecessary UI. AND, there’s more work to be done!
Clear teeth, clean web.
@intenttoship :ThisTBH: 👏 👏 👏 👏 👏
#webComponents #webComponentsCG #shadowDOM #testTheWebForward
Added a bunch of new tests, results, and thoughts. Hope you'll take a look at share the results you're seeing when testing locally!
#testTheWebForward #statistics #areYouAWebComponent #areYouACustomElement
@pablolarah @eric @piccalilli Can’t wait till all browsers support `:host(:has(…))` the way #webkit does and #mozilla partially does so that this is even more natural for #webComponent development, too.
https://wpt.fyi/results/css/css-scoping?label=master&label=experimental&aligned&q=host%20has-0
I love it when a plan comes together!!
`:host:has(...) {}` is now shipping in Chromium! 🪄 💫 ✨
If you're into using `@property {}` declarations with `light-dark()` values, you may want to track this issue in #firefox ...
https://bugzilla.mozilla.org/show_bug.cgi?id=1924562
Seems to get stuck in the "light" value when defined by `@property {}` 😞
Who ever thought that writing tests for under discussion browser features would be so relaxing...
:has-slotted, #LFG https://github.com/web-platform-tests/wpt/pull/48317
@kizu Caught an interesting bug here... seems that a parent with "transform" related styling will confused "position-anchor" resolution. 🐛
https://issues.chromium.org/issues/364318220
If you'd love this to be fixed too, remember to add your "+1" to support Chromium Devs in understanding the priority of issues like these. 🙇
@davatron5000 Are yall seeing:
this.attachShadow({
mode: "open",
referenceTarget: "real-input",
});
Work directly? I'm only able to achieve the relationship with:
this.shadowRoot.referenceTarget = 'real-input';
😢
@Jamessw Issue, in case anyone following along is interested, can be found here: https://issues.chromium.org/issues/362780323
