Angular2 父组件中修改子组件样式

比眉伴天荒 2024-02-19 12:31 63阅读 0赞

情景：父组件FatherComponent中使用了子组件ChildComponent，父组件有自己的css文件，子组件也有自己的css文件，在父组件中修改了子组件的样式，但不起作用。

查看HTML元素的样式表，发现 定义的样式后面都加了个 \_ngcontent-c\#，这是Angular为了区分自己的样式，特意加的标记。

使用特殊选择器：组件样式中有一些从[影子 DOM 样式范围 (Shadow DOM style scoping) 领域][DOM _ _Shadow DOM style scoping_]引入的特殊选择器：

CSS伪类---与自定义元素相关的伪类：
    :defined：匹配任何已定义的元素，包括内置元素和定义的自定义元素CustomElementRegistry.define()。
    :host：选择包含其内部使用的CSS 的shadow DOM的影子主机。
    :host()：选择包含其内部使用的CSS 的阴影DOM的阴影主机（因此您可以从其阴影DOM中选择自定义元素） - 但仅当作为函数参数给出的选择器与阴影主机匹配时。
    :host-context()：选择包含其内部使用的CSS 的影子DOM的影子主机（因此您可以从其影子DOM中选择一个自定义元素） - 但仅当作为函数参数给出的选择器与影子主机的祖先匹配时它位于DOM层次结构中的位置。

/***FatherComponent.html***/
    <div class="father">
      <child-detail></child-detail>
    </div>
    
    /***ChildComponent.html***/
    <div class="child-name">showChildName</div>

/***ChildComponent.css***/
    .child-name{color:pink;font-size:12px}
    
    /***FatherComponent.css***/
    .father .child-name{color:red;font-size:16px;}
    
    这个时候渲染出的showChildName的样式：pink & 12px;

/***ChildComponent.css***/
    .child-name{color:pink;font-size:12px}
    :host-context(.father) .child-name{color:red;font-size:16px;}
    
    /***FatherComponent.css***/
    不写样式
    
    这个时候渲染出的showChildName的样式：red & 16px;

/***ChildComponent.css***/
    .child-name{color:pink;font-size:12px}
    
    /***FatherComponent.css***/
    :host{color:red;font-size:16px;}
    
    
    这个时候渲染出的showChildName的样式：red & 16px;

[DOM _ _Shadow DOM style scoping_]: https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context%28%29