Need to hide element depending on user click.
Tried setting hidden$="{{hideme}}" and changed hideme using this.$.xxx.hideme=true
Also as referred in few discussions changed hidden$="{{hideme()}}" to a function returning value. But both did not work.
What is the right way to set the hidden attribute?
hidden$="{{hideme}} and hidden$="{{hideme()}}" are correct and would both set the hidden attribute, assuming the hideme property and hideme() function are both defined in the host element.
For example, if the <x-foo> element contained:
<paper-tabs hidden$="{{hideme}}">
...then you could hide the <paper-tabs> element by setting <x-foo>.hideme to true.
Note in Polymer 2, you apparently need to define your own [hidden] CSS rule in the host element's styles:
<dom-module id="x=foo">
<template>
<style>
[hidden] {
display: none;
}
</style>
...
demo
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 want to know if it's possible to click on an element and then change another element only using Html and CSS and if it is then how.
some thing like this ( btw this code doesn't work ) :
a:active div{
background-color : blue;
}
Without Javascript your options are rather limited.
You have to find a way to toggle the state by a click and be able to express those states in CSS.
Some option might be theese:
using (hidden?) radiobuttons or checkboxes and using their :checked pseudo class in CSS
using anchors and their pseudo classes (like you already attempted to do)
The problem here is that you have to put all your dynamic contents (the stuff you show/hide on click) inside or next to those toggling elements which might be inpractical.
My favorite is the :target pseudo class. When you open the URL "https://something.com#foobar" the element with the id "foobar" is the current target (if it exists). One limitation of this is that there is only one single target per document. You can control the target by clicking on anchors like this:
.dynamic-content {
display: none;
}
#first:target, #second:target {
display: block;
}
<div>
<div id="first" class="dynamic-content">
First dynamic content
Hide
</div>
<div id="second" class="dynamic-content">
Second dynamic content
Hide
</div>
</div>
Show first
Show second
One way ,I use :focus pseudo class. div:focus a {}
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)
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;
}