I've got a custom component <ui-title> that I wish to style differently based on what its direct parent element is.
For example, if it appears within <ui-section>, style it YELLOW. Within <ui-card> style it BLUE. If it appears anywhere else, style it GREEN.
Here's what I've tried:
:host {
background-color: green;
}
:host-context(ui-card) {
background-color: blue;
}
:host-context(ui-section) {
background-color: yellow;
}
This doesn't work because if an element is nested within both <ui-section> and <ui-card> because both sets of styles would be applied. I wish to apply a set of styles based strictly on the direct parent of the :host element.
Here's a StackBlitz that shows my issue.
I found that you can combine :host and ::ng-deep from this answer after few hours of searching and trying different combination of ::ng-deep, :host and :host-context.
https://stackblitz.com/edit/angular-ivy-yf1uff?file=src/app/ui-title/ui-title.component.css
So just moved the style related to the ui-card and ui-section to their own stylesheet and combine :host and ::ng-deep with child selector >
ui-card.component.css
:host > ::ng-deep ui-title {
font-size: 10px;
background-color: blue;
}
ui-section.component.css
:host > ::ng-deep ui-title {
background-color: yellow;
}
ui-title.component.css
:host {
display: block;
padding: 5px;
border-radius: 10px;
background-color: green;
}
Related
I'm trying to figure out how to apply the property cursor when using :host selector.
Others properties are correctly applied, but not cursor.
:host([disabled]) {
color: #626878;
background-color: #C0C4CB;
cursor: not-allowed!important;
}
:host refer to a web component made with LitElement.
Thanks for your help
Runs fine:
customElements.define("my-element", class extends HTMLElement {
connectedCallback() { // so attributes can be queried
this
.attachShadow({mode:"open"})
.innerHTML = `<style>
:host {
display: inline-block;
}
:host([disabled]) {
cursor: not-allowed !important;
background: pink !important;
color: grey !important;
}
</style>
<h1><my-element
${this.hasAttribute("disabled")?"disabled":""}></h1>`;
}
})
<style>
my-element{
cursor: pointer;
background: lightgreen;
color: green;
}
</style>
<my-element></my-element>
<my-element disabled></my-element>
Requires !important
From https://web.dev/shadowdom-v1/
One gotcha with :host is that rules in the parent page have higher
specificity than :host rules defined in the element. That is, outside
styles win. This allows users to override your top-level styling from
the outside. Also, :host only works in the context of a shadow root,
so you can't use it outside of shadow DOM.
How do I change the background color of Kendo Angular Grid row that is Selected? The following is not making the background color blue. Trying to figure out what is overriding it.
.k-grid .k-state-selected {
background-color: blue !important;
color: green;
}
.k-grid .k-alt.k-state-selected {
background-color: blue !important;
color: green;
}
Resources:
https://www.telerik.com/forums/changing-color-of-selected-row
Your styling doesn't affect the grid due to view encapsulation. You can read more about it here.
To force the use of your custom styling into a child component that has view encapsulation, which is set to Emulated by default for all components, add ::ng-deep before the CSS selector, like this:
:host ::ng-deep .k-grid .k-state-selected {
background-color: blue !important;
color: green;
}
:host ::ng-deep .k-grid .k-alt.k-state-selected {
background-color: blue !important;
color: green;
}
Since ::ng-deep convert the styling into a global rule, you need to add :host before it so that it will affect only the current component and its children.
Note that ::ng-deep is deprecated and technically shouldn't be used. A replacement is planned and ::ng-deep will probably be around until they come up with something else.
You can read more about ::ng-deep here.
According to Vue docs here:
Due to the way browsers render various CSS selectors, p { color: red }
will be many times slower when scoped (i.e. when combined with an
attribute selector). If you use classes or ids instead, such as in
.example { color: red }, then you virtually eliminate that performance
hit
So if you put the following in the Vue's style section:
<style scoped>
.parent .child {
background-color: red;
}
.parent p {
background-color: red;
}
</style>
The VueJs will transform it into this:
<style>
.parent[data-v-12345] .child {
background-color: red;
}
.parent[data-v-12345] p {
background-color: red;
}
</style>
The document says, the second selector is many times slower than the first one.
Can someone explain why the second selector is slower?
Could you please tell me, the differences between the below two scss styles?
I didn't get the clear idea about this.
:host {
display: inline-block;
/deep/ {
span {
color: red;
}
}
}
:host {
display: inline-block;
::ng-deep {
span {
color: red;
}
}
}
The main difference is, that ::ng-deep is supported by SASS, while support for /deep/ was removed. This is the reason why ::ng-deep was added to Angular in addition to /deep/
Besides that, both are deprecated in Angular, because when native shadow DOM support in all browsers becomes usable, they will probably remove ViewEncapsulation.Emulated
Lets say I have in my CSS a color definitions:
.headerColor { background-color: #a6c9e2; }
Now I would also like to define a CSS definition that uses .headerColor:
.header { padding-left: 2px; }
On the CSS level, how can I inherit .header from .headerColor?
I know I can place the two styles on the HTML element (class='header headerColor'), but how can I assign .header to my HTML element and have it pull its parent styles?
You can write like this:
.headerColor, .header { background-color: #a6c9e2; }
.header { padding-left: 2px; }
Now, you just need to set class="header" in HTML.