Css 角度主体元素：在焦点上设置样式的最简单方法是什么

尝试更改主体元素焦点上的样式。虽然以下构造与/deep/结合使用效果良好，但它不适用于主体图元本身。CSS代码有什么问题

:host {
  background-color: white;
  border: 1px solid lightgray;
  padding: 1px 0;
  display: inline-block;
}

:host:focus {
  border: 2px solid lightskyblue;
}

---

感谢您的帮助。

您可以使用HostListener、Renderer2和ElementRef以编程方式完成此操作：

import { Component, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Component({
  selector: 'button[app-button]',
  template: '<ng-content></ng-content>',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {

  constructor(
    private el: ElementRef,
    private renderer: Renderer2
  ) {}

  @HostListener('focus', ['$event.target'])
  onFocus() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'red');
  }

  @HostListener('blur', ['$event.target'])
  onBlur() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'buttonface');
  }
}

---

这里有一个例子：。

有问题的元素能够接受输入吗？是的，元素能够接受输入主机元素类型是什么？主机是角度组件请提供模板/html，以便我们可以更好地帮助您。

:host(:focus) {
  background-color: red;
}