westbrook

Ooooie! These customizable selects look HOT in Safari 27. 🥰

#developingDesignSystems #webDev #testingTheWebForward #webkit #safari

Do I know any @developers@chromium.social devs that work close to #css that I could nerdsnipe into figuring out how chromium could catch up to webkit in so far as a `:host(:has(~ ul li)) {}` selector?

See it in action, here: https://codepen.io/Westbrook/pen/EayLZow

Checkout the #CSSWG convo, here: https://github.com/w3c/csswg-drafts/issues/11859#issuecomment-3834942939

#webComponents developers want all the same `:has()` goodies that anyone can leverage, and you could be the hero we both need and deserve!! 🦸

@zacky@m.marchbox.com A great question, and certainly a reason to hope that Chrome wouldn't have much issue getting into this style of selector!

However, these's no self selector in :host-context(). Always it's interpreted as:

:host {
  .host-context & {
    /* You're in a host context. */
  }
}

It being deprecated, maybe the same intrepid implementor who was going to pull this out of Chromium would be interested in replacing it with extended :host:has(...) and :host(:has(...)) support 🤞

What does it all even mean any more?

@bramus@front-end.social I'd argue the the use of --arg makes the application of the value local, which aligns more to this: https://codepen.io/Westbrook/pen/raMJByv than to what you've shared.

Maybe that's not how mixins work, but it's definitely how I'd read them. Your example feels more like the mixin is:

:root {
  --foo: 10em;
}

@mixin --foo() {
  @Result@mastodon.social {
    &, & > h2, & + p {
      width:  var(--foo);
    }
  }
}