JustDoItTomorrow
3/6/2018 - 10:58 PM

组件样式:特殊的选择器

/*使用: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;
}