CSS ::part selector

[feature-not-a-bug]

I'm working with some content that requires editing shadow dom elements for padding and it would be nice to have a selector that's capable of taking a CSS h list to embed into the body of the selector

An example would be taking some web component and styling inputs or labels inside of it. I can work around it using cls and a hard-coded

  <style>
  .some-user-value::part(base) {
    padding: 9;
    font-weight: bold;
  }
  </style>

[seanhess]

Is this as simple as copying the existing pseudo-selectors in Web.Atomic.CSS.Select? LMK if the following works:

base :: (Styleable h) => (CSS h -> CSS h) -> CSS h -> CSS h
base = pseudo $ Pseudo "base" ":part(base)"

el ~ base (pad 9 . bold) $ "hello"

We could flesh it out by creating a pseudo called "part" that let you pass in the name of the part, but I would need to understand how those shadow-dom elements work better. Is "base" a keyword or something dynamic that you named?

[feature-not-a-bug]

I looked at Pseudo to see if I could make it work and came up with a similar function that doesn't get me what I need

From https://developer.mozilla.org/en-US/docs/Web/CSS/::part

custom-element::part(foo) {
  /* Styles to apply to the `foo` part */
}

So the custom-element would be dynamic and the attribute that's passed to the ::part() function would also be dynamic

https://developer.mozilla.org/en-US/docs/Web/CSS/::part contains a working example, and the full boat on the shadow dom is https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM

[seanhess]

I just tested it and this seems to work:

example = do
example = do
  templates
  el "EXAMPLE"
  tag "tabbed-custom-element" none

  where

  templates = do
    tag "template" @ att "id" "tabbed-custom-element" $ do
      el @ att "part" "tab active" $ "Tab A"
      el @ att "part" "tab" $ "Tab B"
      el @ att "part" "tab" $ "Tab C"
    raw
      [i|<script>
        const template = document.querySelector("\#tabbed-custom-element");
        globalThis.customElements.define(
          template.id,
          class extends HTMLElement {
            constructor() {
              super().attachShadow({ mode: "open" }).append(template.content);
            }
          },
        );
    </script>|]

  activePart :: (Styleable h) => (CSS h -> CSS h) -> (CSS h -> CSS h)
  activePart =
    pseudo $ Pseudo "active-part" "::part(active)"

shadow-dom/templates and atomic-css both provide different methods of code reuse. It might be easier to not use shadow-dom at all. I assume you are integrating with existing templates or have some other reason for doing so. I'm not convinced it's a good idea to commit to maintaining support for shadow dom in the library, but does the above meet your needs?

EDIT: Oops some bugs in this, see below

[seanhess]

This works for dynamic part names:

part :: (Styleable h) => Text -> (CSS h -> CSS h) -> (CSS h -> CSS h)
part ps =
    pseudo $ Pseudo ("part-" <> className (T.replace " " "-" ps)) ("::part(" <> Selector ps <> ")")

example = do
  templates
  tag "tabbed-custom-element" ~ part "tab active" bold $ none

[feature-not-a-bug]

I assume you are integrating with existing templates or have some other reason for doing so

Right, I don't have the ability to recreate the full layout right now and so this would be a temporary shim where I use hyperbole and atomic to do the page design while keeping the existing logic in place. This seems to be the only place where this has cropped up so far