Cacher is the code snippet organizer for pro developers

/*使用:host伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素）*/
:host { 
  display: block;
  border: 1px solid black;
}

:host(.active) {
  border-width: 3px;
}

/*:host-context()伪类选择器。它也以类似:host()形式使用。*/
/*它在当前组件宿主元素的祖先节点中查找 CSS 类， 直到文档的根节点为止。*/
:host-context(.theme-light) h2 {
  background-color: #eef;
}