Two angular components using the same class name for style

components.ts

@Component({
  selector: "gp-button1",
  template: `
    <p class="button">
      button1 works!
    </p>
  `,
  styles: [".button { background-color: green; color: white}"],
  encapsulation: ViewEncapsulation.Emulated // the default
})
export class Button1Component {}

@Component({
  selector: "gp-button2",
  template: `
    <p class="button">
      button2 works!
    </p>
  `,
  styles: [".button { background-color: cyan;}"],
  encapsulation: ViewEncapsulation.Emulated // the default
})
export class Button2Component {}