Custom styling

[oscarotero]

Hi.
As I can see, this component use a style tag in the shadow root to apply styles and use themes to apply colors and fonts.
I recommend to use CSS ::part() pseudo selector for more flexibility and maintainability.

You can see an example of this in the oom-components/searcher web component:

• The customizable elements in the Shadow DOM are labeled with the part attribute: https://github.com/oom-components/searcher/blob/main/searcher.js#L37
• And with simple CSS, you can customize the appearance of the element even in different states like :hover, :focus, :disabled etc: https://github.com/oom-components/searcher/blob/main/demo/styles.css#L9-L16

This would make more easy to apply styles on different media queries, light/dark themes, etc. For example:

psyche-search::part(input) {
    border-color: var(--primary-color);
}

And it allows to combine a base theme in the shadow DOM that can be overrided by outside css.

[dragonwocky]

I know about ::part(), I left it out because I'm hesitant to make it fully customisable - some parts shouldn't be modified (e.g. the balance of element sizing/layout, the position:sticky behaviour of section headings and the "Search by psyche" footer link) and the component is built to be a drop-in, recognisable solution that doesn't require any user HTML/CSS to work (everything should be self-contained within the import - it's not a reuseable custom element built to follow the web component standards, it just makes use of those web APIs for convenience). You can already use custom media queries etc. to customise the themes beyond the builtin light/dark, as the variables are applied to the <psyche-search></psyche-search> element outside the shadow root.

The majority of the client is the UI, and the HTML and CSS involved are very specifically dependent on each other. I'm considering the possibility of separating out the client logic & generalising the Result interface a bit further so there could be multiple client UI options, as the current one is very heavily designed for documentation websites only. Further client customisation would probably be something I would include in that update. I've done some more testing this morning with the ::part() selector and it's more restrictive than I thought (i.e. you can't chain it with a child or sibling selector), so I'd probably include it for some but not all elements as part of that.

[oscarotero]

Ok, no problem.

Yeah, ::part() is used to label specific elements and doesn't allow children selectors. This is good because you can decide which elements you want to make fully customisable and which don't.

I'd like to fix the following issue: the highlighted text is white with yellow background when the result is selected. So I don't know if there's variable in the themes object to handle this.

Other thing that I'd like to change is differentiate a selected element from a element with :hover:

[dragonwocky]

I'd like to fix the following issue: the highlighted text is white with yellow background when the result is selected. So I don't know if there's variable in the themes object to handle this.

Ah, thanks, not sure how I missed that. It's not meant to be yellow at all, I'll release a patch for that soon.

Other thing that I'd like to change is differentiate a selected element from a element with :hover:

Good idea. I'm thinking an outline for select elements and the current fill for hovered elements, I'll see how it looks when I test it.

[dragonwocky]

Those styling issues have been fixed by v0.3.2, but I'll leave this open to come back to the idea of custom styling for future updates.