Styling

[gg4u]

I am using single files components ( <template><script><style>) - I failed to override the styling.

https://github.com/trevoreyre/autocomplete/tree/master/packages/autocomplete-vue#styling-and-customization

Scoped or not, the styles are not applied. However I do see that classes and ids are correctly placed on dom

<style scoped>
 .autocomplete-input { display: none } // style is not applied
</style>

Same behavior when importing the css in the style part:

<style scoped>
@import url('https://cdn.jsdelivr.net/npm/@trevoreyre/autocomplete-js@2.2.0/dist/style.css');  // will not apply styles
</style>

The only way is to import the css in the script, like:

 import '@trevoreyre/autocomplete-vue/dist/style.css'

Can you debrief how to scope styling for the component and its functional template ?

[trevoreyre]

The included styles are intentionally opinionated, and are meant to be imported in your JS, like your last example.

To override the styles yourself, you'd need to add a class to the component wherever you are applying the scoped styles. If you are using the default slot you can control the rendering of the entire component, and add your scoped classes to each of the child elements as well.

If you're not using the slot, you can add a classname to the root component, and use deep selectors to style the child elements inside the autocomplete component. Additionally you can use the baseClass prop to change the class of the child elements in the component.