I want to customize an existing polymer element spinner-backdrop
by overriding its z-index css attribute.
All customization attempts from the outside have failed.
Because the z-index attribute is not exposed for outside customization.
I'm using that component wrapped inside an Angular2 app.
Should I create an new polymer element which extends that element?
Is there a more direct route, because I have never developed an polymer element.
The current 1.0.0 release of <spinner-backdrop> has no CSS property/mixin to set the z-index, but the --spinner-backdrop-overlay mixin was recently added and not yet released. You'd be able to use the mixin to set the z-index like this:
<style is="custom-style">
spinner-backdrop {
--spinner-backdrop-overlay: {
z-index: 0;
};
}
</style>
If <spinner-backdrop> is inside a Polymer element (<dom-module>), your <style> doesn't need is="custom-style". Otherwise, it's needed to apply the mixin properly.
demo (in <dom-module>)
demo (in index.html)
Related
I need to style a component based on the class attached to the <body>.
The logo-placeholder is contained inside a shadow root.
The body is outside, of course.
This is what I would like to achieve:
.logo-placeholder {
background: url(logo_LIGHT.png);
}
body.dark .logo-placeholder {
background: url(logo_DARK.png);
}
A huge point with shadow dom that is self-contained. That goes with the CSS as well. Think of each component as a HTML document of its own.
If you want to style an element inside a placeholder, you need to do something like this.
<body>
<custom-element class="dark-background"></custom-element>
</body>
Then inside the custom-element, style your div based on the host's class.
:host(.dark-background) .logo-placeholder {
background: url(logo_DARK.png);
}
Another way would be to use CSS properties.
body custom-element {
--logo-placeholder-background: 'logo_LIGHT.png';
}
body.dark custom-element {
--logo-placeholder-background: 'logo_DARK.png';
}
Then declare the following inside your custom-element
.logo-placeholder {
--background-fallback: 'logo_LIGHT.png';
background: url(var(--logo-placeholder-background, --background-fallback);
}
A complete solution would be as follows:
:host-context(body.dark) .logo-placeholder {
background: url(logo_DARK.png);
}
:host-context(body.dark) means that the selector body.dark must be evaluated in the context of the host container, not based on the shadow-DOM. This is the reason it works.
Whenever we want a custom element to be styled based on its position in the DOM rather than obeying to the shadow-DOM rules, we can use the :host-context() selector.
[:host-context()] allows a custom element, or anything within that custom element's shadow DOM, to apply different styles based on its position within the outer DOM or classes/attributes applied to ancestor elements.
Another typical use would be to allow inner elements to react to classes or attributes on any ancestor elements - for example, applying a different text color when a .dark-theme class is applied to <body>.
I am fairly new to Angular and HTML.
I have two different components, let's say componentAand componentB, both with their repsective .html, .css and .ts files.
In componentA.css, I define some styles, e.g.:
.compA-style {
font-size: 20px;
}
Now in componentB.hmtl, I am using componentA's directive:
<compA></compA>
How can I now change the styles of componentA inside the css file of componentB, without changing the style inside componentA?
Note: I cannot change the style of componentA because I want to use the unmodifed style inside other components, I only want to change for the componentB.
Note: I already tried !important inside componentB.css, i.e. I tried this one:
.compA-style {
font-size: 30px !important;
}
And then in componentB.html:
<compA class=".compA-style"></compA>
But that didn't work.
Angular encapsulates CSS at component level.
This means that even if you have multiple CSS classes with the same name across multiple components, each of those components will use its own class, regardless of the DOM structure.
There are times when you might want to modify a child component styling, though.
You can do this in multiple ways. Let's assume compB contains compA.
::ng-deep
:host {
// ... Other styles
::ng-deep compA {
// ... Custom compA styles
}
}
Explanation: ::ng-deep selector provides cross-component visibility of CSS given its boundaries (wrapper selectors). Whatever you write within ::ng-deep compA will be shared with everything in compA.
WARNING: If you use ::ng-deep at base level in a component styling sheet (without a wrapper), the styles it contains will be spread both up and down across the application (NOT only within current component) and they load whenever the component loads. That is why it's usually wrapped into a :host selector.
Global style sheets
You can write custom styles in application base level styles.css file or create new css files to include at application load (outside Angular environment, for example with a <link> tag in index.html).
They are useful when you have a bunch of styles to overwrite that are the same across the application and don't want to mess with specific component stylesheets too much. Might not always be a good practice.
Add new component stylesheets in styleUrls array in the #Component decorator.
This might not necessarily apply to your case, but it's worth mentioning.
#Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css', '../styles/background.css', '../styles/input.css', '../styles/container.css' /* ... other stylesheets here */]
})
This is a good approach that helps keeping common styles in a single place while not making them global. You can add whatever styles you need to the specific component and split them as needed.
How can I now change the styles of componentA inside the css file of componentB, without changing the style inside componentA?
There is only way to add styles without edit component-A directly.
on componentB.css
:host ::ng-deep compA-style {
font-size: 30px !important;
}
on componentA.html
<compA class="compA-style"></compA>
NOTE: This functionality is deprecated.
Checkout docs ng-deep.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
This demo demonstrates my problem: http://jsbin.com/kuxuqa/3/edit?html,output
The background is being applied to both buttons, however the mixin is not being applied to the button that is part of a custom element. How can I declare a mixin that will apply to Button 2?
For some reason I was thinking I had to target paper-button in my selector. The solution to my example was:
#test {
--paper-button {
color: red;
}
}
The key is to avoid use of /deep/ and ::shadow (since those will reportedly be deprecated). You should target only light dom with your selectors, using mixins to apply custom styling for elements in shadow dom.
I want to change the styling of paper-icon-buttons, specifically the padding that is defined on paper-icon-button via :host. However, I think this is not possible according to the specs?
So in order to change the styling, one would have to actually change the Polymer element itself, right? Which is a problem though if I want to get updates of the element via bower. Is there a way to change the :host styling with CSS outside of the Polymer element? This is not working.
paper-icon-button:host {
padding: 4px;
}
You can specify styling directly on an instance of the element or with css on the element's name - http://jsbin.com/mohifu/3/edit
Just apply the css directly to element
paper-icon-button{
padding: 4px;
}
I am using the InfoBox plugin, as described here. What I'd like to do is to apply some custom css rules to the close icon of the infoBox. The canvas div for my map is called "mapCanvas", so here is the css selector I am trying to use:
#mapCanvas div.infoBox > img {
}
However, this won't apply the style - and it's not that its being overwritten by another, more specific selector. It's not even picking up the class at all when rendered! Does GMaps infoBox/infoWindow class have some process that removes all custom CSS classes assigned to the object on creation? Any ideas?
The style for the close-icon will be set via script(inline), you must add a !important-rule to be able to override it:
#map_canvas div.infoBox > img {
position:absolute !important;
}