What might support for the ::part(...) pseudoelement look like?

[jamesarosen]

Tailwind supports pseudo-elements like ::before and ::after with before:mb-4 after:mt-4.

What would it look like to support the ::part pseudo-element, which takes a part name argument? In CSS, it's

my-element::part(title) {
  font-weight: bold;
}

Perhaps <my-element class="part(title):font-bold">?

See also the corresponding discussion on unocss/unocss

[jamesarosen]

It's possible to do this now with the custom selector escape hatch:

<div class="m-10 p-10 border-2 [&::part(title)]:font-bold">

results in

@layer utilities {
  .m-10 {
    margin: calc(var(--spacing) * 10);
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .\[\&\:\:part\(title\)\]\:font-bold {
    &::part(title) {
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold);
    }
  }
}