¿Cómo agregar algunos estilos para algunos componentes específicos en css con alcance?

Estoy escribiendo un componente (no importa si está desarrollado con Vue o Angular, porque todos tienen el concepto de estilos con ámbito. - vue - Angular ). Y llamémoslo foobar.

Debido a los estilos de alcance, un .specificestilo en realidad es .specific[foobar-component-id-which-is-generated-randomly], por lo que no nos preocupamos de que los estilos foobarafecten a otros componentes o elementos de otras páginas sin querer.

No quiero renunciar al beneficio.

Sin embargo, uso muchos componentes proporcionados por una biblioteca de interfaz de usuario, por ejemplo, Angular-Material 's mat-select.

Aunque mat-selectproporcione una forma de agregarle una clase de estilo, por ejemplo, puedo agregarle una specificclase de estilo mediante <mat-select [panelClass="specific"].

Sin embargo, escribir .specific {width: 500px}en foobar.cssno tendrán efecto. Porque el elemento generado desde el mat-selectcual finalmente se cargó en la página (no sé por qué), no tiene la propiedad foobar-component-id-which-is-generated-randomly.

¿Hay alguna solución bajo la condición de no usar estilos globales y solo cambiar algunos estilos de componentes específicos (no todos en mi componente de escritura)?

Muchas gracias.

Answer