Demo: shadow parts & slots inspector

[web-padawan]

The idea is to implement a special mode (e.g. using a tab in the "Demo" part).

• DOM flat tree representation: component, its part elements and slot elements

expansion-panel
  ::part(header)
    ::part(toggle)
    ::slotted([slot="name"])
  ::part(content)
    ::slotted(:not([slot]))

• When hovering a row in the list, it should be highlighted in the demo snippet:

• Additionally, borders can be toggled for all the CSS parts in the component

• Clicking every selector allows to edit corresponding CSS rules in a text area.

[jouni]

Looks great! Have you considered state attributes?

[web-padawan]

Yes, I was thinking about state attributes too. However it would make it more complicated.

Another idea that I have on my mind is to create a "states" section showcasing all the states:

• :hover
• :focus
• :focus-visible

And of course custom states as well. This would mean the need to distinguish "state attributes" (although all the attributes that do not match properties can be considered).