Scoped Styles

[pxwee5]

In 3.1.8, a bunch of styles have been updated to use scoped style and the use of elements styling like input {} rules are used.

This is both bad practices I believe.

1. Scoped styles - add specificity to the base styling, making it hard to be overwritten. E.g. .dropdown-item[data-xxx] has specificity of 2.

2. Element styles - Even if this is scoped, it still inherits project's base styling. E.g. input[data-xxx] inherits project's input styles.

Ideally this project classes should be neutral. Examples like:

.vue-tel-input {} 
.vti__iti-flag {} 
.vti__selection {} 
.vti__dropdown-menu.show {} // Keep this to minimum
.vti__input {} 
.vti__ul {} 

This way all the styles:

1. Are scoped to the project name
2. Does not inherit default input styles
3. Are easy to overwrite.

[iamstevendao]

@pxwee5 Thanks for your help as always, it's available in v4.0.0.