The problem I am having seems to defeat the very purpose of CSS in JS. I am using styled-compomnents. And when I tried to use a classname that is being used somewhere up in the react tree inside a styled component. The upper component classname styles somehow get applied to the classname I used down (very) the tree.
Steps to reproduce
Render UpperComponent anywhere in a react project.
const StyledContainer = styled.div`
.title {
color: red;
margin-bottom: 32px;
}
`;
const UpperComponent = () => {
return (
<StyledContainer>
<FirstComponent />
<h4 className="title"> text inside upper component </h4>
</StyledContainer>
);
};
const FirstStyledContainer = styled.div``;
const FirstComponent = () => {
return (
<FirstStyledContainer>
<h4 className="title">text inside first component</h4>
<SecondComponent />
</FirstStyledContainer>
);
};
const SecondComponent = () => {
return (
<div>
<h4 className="title">text inside second component</h4>
<ThirdComponent />
</div>
);
};
const ThirdComponent = () => {
return (
<div>
<h4 className="title">text inside second component </h4>
</div>
);
};
Expected Behavior
title classname in the UpperComponent should not affect it's descendants' elements with the same classname. It should be scoped only to <h4 className="title"> text inside upper component </h4>
Actual Behavior
.title { color: red; margin-bottom: 32px; } class styles get applied to all the components inside UpperComponent. title somehow makes it down to ThirdCompoent which is nested inide two components.
Is this expected behavior or am I missing something basic (best practice)?
If you want enforce the scoping - You can remove the class names and/or let "styled component" name them (generates a random hash class name) by creating a TitleStyle and attach to the title div (class name "title" can be removed). This should scope to that title only then. Right ?
Another alternative
Yes the FirstComponent and SecondComponent (etc) will catch the css rule from the top. This is the expected result for me. Its not like when we do this below !
<div style = {{color:"red"}}>Test</div>
This would apply the css inline to that div only.
I would slightly change the names of the title classes like so
const StyledContainer = styled.div`
.title {
color: red;
margin-bottom: 32px;
&.secondary { color: pink; }
&.thirdly { color: yellow; }
}
`;
const UpperComponent = () => {
return (
<StyledContainer>
<FirstComponent />
<h4 className="title"> text inside upper component </h4>
</StyledContainer>
);
};
const SecondComponent = () => {
return (
<div>
<h4 className="title secondary">text inside second component</h4>
<ThirdComponent />
</div>
);
};
const ThirdComponent = () => {
return (
<div>
<h4 className="title thirdly">text inside second component </h4>
</div>
);
};
The & is a SCSS operator and works fine with styled components.
CSS is more benifical to behave this way as passing css rules down is more effecient. Work with this effeciency ! You want to create site wide CSS patterns, try avoid specific targeting unless your sure its required (Which should be not too common).
What I do moslty is, created a styled component for the react component, so one per react components to handle all css/scss in that react component.
Daniel
This is working as it should. You're selecting all the .titles in that styled-component.
In the end, styled-components just generate a unique class name for every styled-component you made. So the rules of CSS still work there.
You can
You can select only the direct descendant .title.
const StyledContainer = styled.div`
>.title {
// rules...
}
`
Change the class name to something more specific.
Nest the CSS rule on the parent. So instead of this,
const StyledContainer = styled.div`
.title {
// rules...
}
`
Wrap your h4 with another element and do this
const StyledContainer = styled.div`
.wrapperClassName {
.title {
// rules...
}
}
`
I know how to use ::ng-deep to apply styles to specific component's internal parts, but I'm looking for a more correct solution that does not require the parent to know about the components parts, and specifically to set dimensions of the component (width and hight).
Here's the full scenario:
#Component({
selector: 'app-root',
template: '<h1>Hello World!<h1><app-green-box></app-green-box>',
styles: [ 'app-green-box { width: 50%; }' ],
})
export class AppComponent {
}
#Component({
selector: 'app-green-box',
template: '<div class="green-box">Bye</div>',
styles: [ '.green-box { border: solid black 1px; background: green; }' ],
})
export class GreenBoxComponent {
}
As you can see, AppComponent would like a green box that is 50% wide. GreenBoxComponent does not have a way to know that (another parent might want it at 70% or at 10%).
Unfortunately, the above code doesn't work (I'm not exactly sure why - the custom element doesn't actually take up space as it has no visual presentation by itself, and so it can't be a bounding box for the content?).
Using ::ng-deep requires the parent component to know that GreenBoxComponent uses a <div> for its internal box implementation, but is there a way to have the component just "copy" the styles from the host to whatever internal part it needs to apply these to?
Actually, after trying to explain to myself the reason that the custom element isn't a bounding box (in the question), I figured out the problem: the default display for the custome element is inline so it doesn't obey the size restrictions of the parent.
The solution is for GreenBoxComponent to understand that it represents a box and not an inline element and that parents would like to treat it as a box - so it should force its host element to have display: block, like so:
#Component({
selector: 'app-green-box',
template: '<div class="green-box">Bye</div>',
styles: [
':host { display: block; }',
'.green-box { border: solid black 1px; background: green; }',
],
})
export class GreenBoxComponent {
}
Assumed I have created an Angular component called button and I want the user, who implements it in their app to set the color of the button. Is there a other way than using Input() decorators?
The only alternative way that I'm were of is using ng::deep. But remember, this feature will become deprecated soon!
Follows an example of how to use it.
app.component.html:
<my-component>
<another-component>
<div class="buton"></div>
</another-component>
</my-component>
my-component.component.scss:
.someclasse ::ng-deep {
.button {
background-color: white;
}
}
#Input decorator is the best in this situation, for ex. :
button.component.html:
<button class="your-custom-buttom" [ngStyle]="{backgroundColor: color}">Button</button>
button.component.ts:
#Input() color = 'red'
app.component.html:
<app-button color="green"></app-button>
Other way, you could add some specific class to button component, and tell user to change it in styles.scss:
styles.scss:
.your-custom-buttom {
background-color: red;
}
button.component.html:
<button class="your-custom-buttom">button</button>
https://stackblitz.com/edit/angular-dyrn4f?file=src%2Fapp%2Fbutton%2Fbutton%2Fbutton.component.html
I've got a parent component:
<parent></parent>
And I want to populate this group with child components:
<parent>
<child></child>
<child></child>
<child></child>
</parent>
Parent template:
<div class="parent">
<!-- Children goes here -->
<ng-content></ng-content>
</div>
Child template:
<div class="child">Test</div>
Since parent and child are two separate components, their styles are locked to their own scope.
In my parent component I tried doing:
.parent .child {
// Styles for child
}
But the .child styles are not getting applied to the child components.
I tried using styleUrls to include the parent's stylesheet into child component to solve the scope issue:
// child.component.ts
styleUrls: [
'./parent.component.css',
'./child.component.css',
]
But that didn't help, also tried the other way by fetching the child stylesheet into parent but that didn't help either.
So how do you style child components that are included into a parent component?
Update - Newest Way
Don't do it, if you can avoid it. As Devon Sans points out in the comments: This feature will most likely be deprecated.
Last Update
From Angular 4.3.0 till even now (Angular 12.x), all piercing css combinators were deprecated. Angular team introduced a new combinator ::ng-deep as shown below,
DEMO : https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview
styles: [
`
:host { color: red; }
:host ::ng-deep parent {
color:blue;
}
:host ::ng-deep child{
color:orange;
}
:host ::ng-deep child.class1 {
color:yellow;
}
:host ::ng-deep child.class2{
color:pink;
}
`
],
template: `
Angular2 //red
<parent> //blue
<child></child> //orange
<child class="class1"></child> //yellow
<child class="class2"></child> //pink
</parent>
`
Old way
You can use encapsulation mode and/or piercing CSS combinators >>>, /deep/ and ::shadow
working example : http://plnkr.co/edit/1RBDGQ?p=preview
styles: [
`
:host { color: red; }
:host >>> parent {
color:blue;
}
:host >>> child{
color:orange;
}
:host >>> child.class1 {
color:yellow;
}
:host >>> child.class2{
color:pink;
}
`
],
template: `
Angular2 //red
<parent> //blue
<child></child> //orange
<child class="class1"></child> //yellow
<child class="class2"></child> //pink
</parent>
`
You should NOT use ::ng-deep, it is deprecated. In Angular, the proper way to change the style of children's component from the parent is to use encapsulation (read the warning below to understand the implications):
import { ViewEncapsulation } from '#angular/core';
#Component({
....
encapsulation: ViewEncapsulation.None
})
And then, you will be able to modify the css form your component without a need from ::ng-deep
.mat-sort-header-container {
display: flex;
justify-content: center;
}
WARNING: Doing this will make all css rules you write for this component to be global.
In order to limit the scope of your css to this component and his child only, add a css class to the top tag of your component and put your css "inside" this tag:
template:
<div class='my-component'>
<child-component class="first">First</child>
</div>,
Scss file:
.my-component {
// All your css goes in there in order not to be global
}
UPDATE 3:
::ng-deep is also deprecated which means you should not do this at all anymore. It is unclear how this affects things where you need to override styles in child components from a parent component. To me it seems odd if this gets removed completely because how would this affect things as libraries where you need to override styles in a library component?
Comment if you have any insight in this.
UPDATE 2:
Since /deep/ and all other shadow piercing selectors are now deprecated. Angular dropped ::ng-deep which should be used instead for a broader compatibility.
UPDATE:
If using Angular-CLI you need to use /deep/ instead of >>> or else it will not work.
ORIGINAL:
After going to Angular2's Github page and doing a random search for "style" I found this question: Angular 2 - innerHTML styling
Which said to use something that was added in 2.0.0-beta.10, the >>> and ::shadow selectors.
(>>>) (and the equivalent/deep/) and ::shadow were added in 2.0.0-beta.10. They are similar to the shadow DOM CSS combinators (which are deprecated) and only work with encapsulation: ViewEncapsulation.Emulated which is the default in Angular2. They probably also work with ViewEncapsulation.None but are then only ignored because they are not necessary. These combinators are only an intermediate solution until more advanced features for cross-component styling is supported.
So simply doing:
:host >>> .child {}
In parent's stylesheet file solved the issue. Please note, as stated in the quote above, this solution is only intermediate until more advanced cross-component styling is supported.
You should not write CSS rules for a child component elements in a parent component, since an Angular component is a self-contained entity which should explicitly declare what is available for the outside world. If child layout changes in the future, your styles for that child component elements scattered across other components' SCSS files could easily break, thus making your styling very fragile. That's what ViewEncapsulation is for in the case of CSS. Otherwise, it would be the same if you could assign values to private fields of some class from any other class in Object Oriented Programming.
Therefore, what you should do is to define a set of classes you could apply to the child host element and implement how the child responds to them.
Technically, it could be done as follows:
// child.component.html:
<span class="label-1"></span>
// child.component.scss:
:host.child-color-black {
.label-1 {
color: black;
}
}
:host.child-color-blue {
.label-1 {
color: blue ;
}
}
// parent.component.html:
<child class="child-color-black"></child>
<child class="child-color-blue"></child>
In other words, you use :host pseudo-selector provided by Angular + set of CSS classes to define possible child styles in child component itself. You then have the ability to trigger those styles from outside by applying pre-defined classes to the <child> host element.
Sadly it appears that the /deep/ selector is deprecated (at least in Chrome)
https://www.chromestatus.com/features/6750456638341120
In short it appears there is (currently) no long term solution other than to somehow get your child component to style things dynamically.
You could pass a style object to your child and have it applied via:
<div [attr.style]="styleobject">
Or if you have a specific style you can use something like:
<div [style.background-color]="colorvar">
More discussion related to this:
https://github.com/angular/angular/issues/6511
Had same issue, so if you're using angular2-cli with scss/sass use '/deep/' instead of '>>>', last selector isn't supported yet (but works great with css).
If you want to be more targeted to the actual child component than you should do the follow. This way, if other child components share the same class name, they won't be affected.
Plunker:
https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p=preview
For example:
import {Component, NgModule } from '#angular/core'
import {BrowserModule} from '#angular/platform-browser'
#Component({
selector: 'my-app',
template: `
<div>
<h2>I'm the host parent</h2>
<child-component class="target1"></child-component><br/>
<child-component class="target2"></child-component><br/>
<child-component class="target3"></child-component><br/>
<child-component class="target4"></child-component><br/>
<child-component></child-component><br/>
</div>
`,
styles: [`
/deep/ child-component.target1 .child-box {
color: red !important;
border: 10px solid red !important;
}
/deep/ child-component.target2 .child-box {
color: purple !important;
border: 10px solid purple !important;
}
/deep/ child-component.target3 .child-box {
color: orange !important;
border: 10px solid orange !important;
}
/* this won't work because the target component is spelled incorrectly */
/deep/ xxxxchild-component.target4 .child-box {
color: orange !important;
border: 10px solid orange !important;
}
/* this will affect any component that has a class name called .child-box */
/deep/ .child-box {
color: blue !important;
border: 10px solid blue !important;
}
`]
})
export class App {
}
#Component({
selector: 'child-component',
template: `
<div class="child-box">
Child: This is some text in a box
</div>
`,
styles: [`
.child-box {
color: green;
border: 1px solid green;
}
`]
})
export class ChildComponent {
}
#NgModule({
imports: [ BrowserModule ],
declarations: [ App, ChildComponent ],
bootstrap: [ App ]
})
export class AppModule {}
Hope this helps!
codematrix
Actually there is one more option. Which is rather safe. You can use ViewEncapsulation.None BUT put all your component styles into its tag (aka selector). But anyway always prefer some global style plus encapsulated styles.
Here is modified Denis Rybalka example:
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'parent',
styles: [`
parent {
.first {
color:blue;
}
.second {
color:red;
}
}
`],
template: `
<div>
<child class="first">First</child>
<child class="second">Second</child>
</div>`,
encapsulation: ViewEncapsulation.None,
})
export class ParentComponent {
constructor() { }
}
Since /deep/, >>>, and ::ng-deep are all deprecated.
The best approach is to use the following in your child component styling
:host-context(.theme-light) h2 {
background-color: #eef;
}
This will look for the theme-light in any of the ancestors of your child component.
See docs here: https://angular.io/guide/component-styles#host-context
There are a few options to achieve this in Angular:
1) You can use deep css selectors
:host >>> .childrens {
color: red;
}
2) You can also change view encapsulation it's set to Emulated as a default but can be easily changed to Native which uses Shadow DOM native browser implementation, in your case you just need to disable it
For example:`
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'parent',
styles: [`
.first {
color:blue;
}
.second {
color:red;
}
`],
template: `
<div>
<child class="first">First</child>
<child class="second">Second</child>
</div>`,
encapsulation: ViewEncapsulation.None,
})
export class ParentComponent {
constructor() {
}
}
I find it a lot cleaner to pass an #INPUT variable if you have access to the child component code:
The idea is that the parent tells the child what its state of appearance should be, and the child decides how to display the state. It's a nice architecture
SCSS Way:
.active {
::ng-deep md-list-item {
background-color: #eee;
}
}
Better way: - use selected variable:
<md-list>
<a
*ngFor="let convo of conversations"
routerLink="/conversations/{{convo.id}}/messages"
#rla="routerLinkActive"
routerLinkActive="active">
<app-conversation
[selected]="rla.isActive"
[convo]="convo"></app-conversation>
</a>
</md-list>
As of today (Angular 9), Angular uses a Shadow DOM to display the components as custom HTML elements. One elegant way to style those custom elements might be using custom CSS variables. Here is a generic example:
class ChildElement extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({mode: 'open'});
var wrapper = document.createElement('div');
wrapper.setAttribute('class', 'wrapper');
// Create some CSS to apply to the shadow dom
var style = document.createElement('style');
style.textContent = `
/* Here we define the default value for the variable --background-clr */
:host {
--background-clr: green;
}
.wrapper {
width: 100px;
height: 100px;
background-color: var(--background-clr);
border: 1px solid red;
}
`;
shadow.appendChild(style);
shadow.appendChild(wrapper);
}
}
// Define the new element
customElements.define('child-element', ChildElement);
/* CSS CODE */
/* This element is referred as :host from the point of view of the custom element. Commenting out this CSS will result in the background to be green, as defined in the custom element */
child-element {
--background-clr: yellow;
}
<div>
<child-element></child-element>
</div>
As we can see from the above code, we create a custom element, just like Angular would do for us with every component, and then we override the variable responsible for the background color within the shadow root of the custom element, from the global scope.
In an Angular app, this might be something like:
parent.component.scss
child-element {
--background-clr: yellow;
}
child-element.component.scss
:host {
--background-clr: green;
}
.wrapper {
width: 100px;
height: 100px;
background-color: var(--background-clr);
border: 1px solid red;
}
What I prefer to achieve this is the following:
use #Component to add css class to host element and set encapsulation to none. Then reference that class which was added to the host within the components style.css.scss This will allow us to declare styles which will only affect ourselves and our children within scope of our class. f.e.
#Component({
selector: 'my-component',
templateUrl: './my-component.page.html',
styleUrls: ['./my-component.page.scss'],
host: {
class: 'my-component-class'
},
encapsulation: ViewEncapsulation.None
})
in combination with the following css (my-component.page.scss)
// refer ourselves so we are allowed to overwrite children but not global styles
.my-component-class {
// will effect direct h1 nodes within template and all h1 elements within child components of the
h1 {
color: red;
}
}
// without class "scope" will affect all h1 elements globally
h1 {
color: blue;
}
The quick answer is you shouldn't be doing this, at all. It breaks component encapsulation and undermines the benefit you're getting from self-contained components. Consider passing a prop flag to the child component, it can then decide itself how to render differently or apply different CSS, if necessary.
<parent>
<child [foo]="bar"></child>
</parent>
Angular is deprecating all ways of affecting child styles from parents.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
For assigning an element's class in a child component you can simply use an #Input string in the child's component and use it as an expression inside the template. Here is an example of something we did to change the icon and button type in a shared Bootstrap loading button component, without affecting how it was already used throughout the codebase:
app-loading-button.component.html (child)
<button class="btn {{additionalClasses}}">...</button>
app-loading-button.component.ts
#Input() additionalClasses: string;
parent.html
<app-loading-button additionalClasses="fa fa-download btn-secondary">...</app-loading-button>
i also had this problem and didnt wanted to use deprecated solution
so i ended up with:
in parrent
<dynamic-table
ContainerCustomStyle='width: 400px;'
>
</dynamic-Table>
child component
#Input() ContainerCustomStyle: string;
in child in html div
<div class="container mat-elevation-z8"
[style]='GetStyle(ContainerCustomStyle)' >
and in code
constructor(private sanitizer: DomSanitizer) { }
GetStyle(c) {
if (isNullOrUndefined(c)) { return null; }
return this.sanitizer.bypassSecurityTrustStyle(c);
}
works like expected and should not be deprecated ;)
As the internet updates I've come across a solution.
First some caveats.
Still don't do it. To clarify, I wouldn't plan on child components allowing you to style them. SOC. If you as the component designer want to allow this then all the more power to you.
If your child doesn't live in the shadow dom then this won't work for you.
If you have to support a browser that can't have a shadow dom then this also won't work for you.
First, mark your child component's encapsulation as shadow so it renders in the actual shadow dom. Second, add the part attribute to the element you wish to allow the parent to style. In your parent's component stylesheet you can use the ::part() method to access
This is a solution with just vanilla css, nothing fancy, you don't even need !important. I assume you can't modify the child, otherwise the answer is even more simple, I put that answer at the end just in case.
Overriding a child's CSS is sometimes needed when using a pre-made component from a library, and the devs have not provided any class input variables. ::ng-deep is deprecated and encapsulation: ViewEncapsulation.None turns all of your component's CSS global. So here is a simple solution that uses neither of those.
The fact is, we do need a global style in order for the CSS to reach the child. So, we can just put the style in styles.css or we can create a new CSS file and add it to the styles array in angular.json. The only issue is that we need a specific selector so as not to target other elements. That's a pretty easy solution - just add a unique class name to the html, I recommend using the parent component's name in the class name to ensure it is unique.
Parent Component
<child class="child-in-parent-component"></child>
Let's pretend we want to change the background-color of all the buttons within the child, we do need to achieve the correct specificity to make sure our styles take precedence. We can do this with !important next to all our properties, but a better way is to just repeat the class name until our selector is specific enough, may take a few tries. That way, someone else can override this css again if necessary.
Global Styles File
.child-in-parent-component.child-in-parent-component.child-in-parent-component
button {
background-color: red;
}
or quick and dirty with !important (not recommended)
.child-in-parent-component button {
background-color: red !important;
}
If the child component can be modified
Simply add an input variable to the component and make use of Angular's ngStyle directive. You can add multiple variables to style multiple areas of your component.
Child Component
type klass = { [prop: string]: any } | null;
#Component({...})
export class ChildComponent {
#Input() containerClass: klass = null;
#Input() pClass: klass = null;
...
}
<div [ngStyle]="containerClass">
<p [ngStyle]="pClass">What color will I be?</p>
</div>
Parent Component
<child
[containerClass]="{ padding: '20px', 'background-color': 'black' }"
[pClass]="{ color: 'red' }"
>
</child>
This is the intended way to create a component with a dynamic style. Many pre-made components will have a similar input variable.
this has worked for me
in the parent component:
<child-component [styles]="{width: '160px', borderRadius: '16px'}" >
</child-component>
I propose an example to make it more clear, since angular.io/guide/component-styles states:
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
On app.component.scss, import your *.scss if needed. _colors.scss has some common color values:
$button_ripple_red: #A41E34;
$button_ripple_white_text: #FFF;
Apply a rule to all components
All the buttons having btn-red class will be styled.
#import `./theme/sass/_colors`;
// red background and white text
:host /deep/ button.red-btn {
color: $button_ripple_white_text;
background: $button_ripple_red;
}
Apply a rule to a single component
All the buttons having btn-red class on app-login component will be styled.
#import `./theme/sass/_colors`;
/deep/ app-login button.red-btn {
color: $button_ripple_white_text;
background: $button_ripple_red;
}
I have solved it outside Angular. I have defined a shared scss that I'm importing to my children.
shared.scss
%cell {
color: #333333;
background: #eee;
font-size: 13px;
font-weight: 600;
}
child.scss
#import 'styles.scss';
.cell {
#extend %cell;
}
My proposed approach is a way how to solve the problem the OP has asked about. As mentioned at multiple occasions, ::ng-deep, :ng-host will get depreciated and disabling encapsulation is just too much of a code leakage, in my view.
let 'parent' be the class-name of parent and 'child' be the class-name of child
.parent .child{
//css definition for child inside parent components
}
you can use this format to define CSS format to 'child' component inside the 'parent'
I'm creating a data tree where the child components are just new instances of the parent. When I hover over the folder name in the parent, I show edit and delete buttons. I want that same behavior when my folder is expanded to show the child components, but the hover does not work. I have tried disabling the view encapsulation and also the /deep/ approach in the css file, but I couldn't get either to work. I've also tried binding a css class and then passing it to the new instance, but again that didn't work.
library-tree.html (parent to Library)
<div id="scrollbar-style">
<div *ngFor="let media of libraries">
<library
[media]="media">
</library>
</div>
</div>
library.html (child of Library Tree)
<h4 class="category-name>{{media.name}}</h4> //hover here
<div class="edit-delete-btns"> //buttons that show on hover at the top level, but not in child Library components
<button name="media.id" (click)="onCategoryNameEdit()"></button>
<button name="media.id" (click)="onCategoryDelete(media.id)"></button>
</div>
<div *ngIf="libraryVisible">
<ul *ngIf="media.category">
<li *ngFor="let category of media.category">
<library [media]="category" [ngClass]="libraryCompClass" [libraryCompClass]="libraryComp"></library>
</li>
</ul>
</div>
Library.ts
import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '#angular/core';
import { Media } from '../../../shared/models/media';
export class LibraryComponent implements OnInit {
#Input() libraryCompClass: string;
#Input() media: Media;
constructor() {}
}
library.scss
.edit-delete-btns {
display: none;
z-index: 102;
}
.category-name:hover ~ .edit-delete-btns {
display: inline-block; //this works in the top level to show the buttons
}
/deep/ div > ul > li > .libraryCompClass > .library > .category-name:hover ~ .edit-delete-btns {
display: inline-block; //my attempt at chaining classes to reach the deeper elements in the child component
}
.category-name {
z-index: 101;
}
.edit-delete-btns:hover {
display: inline-block;
}
Any ideas would be helpful, thanks!
Have you seen Angular 4.3 Now Available
Support for the emulated /deep/ CSS Selector (the Shadow-Piercing
descendant combinator aka >>>) has been deprecated to match browser
implementations and Chrome’s intent to remove. ::ng-deep has been
added to provide a temporary workaround for developers currently using
this feature.
Ironically I saw /deep/ in an Angular video today for the first time.
So it was very fresh in my mind. I Googled it and linked the author of the video this and this asking if it still worked.
He made me aware of the release notes..
Seems even ::ng-deep is on the way out