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.