How to set CSS style in Polymer 3 using JS functions
So, I am fairly new to Polymer but I have worked trough all tutorials I could find and the search function doesn't help me with my problem either.
I am trying to set the style of elements via JS functions. I know that I could use things like:
getColor () {
if(this.is_even) {
return "background-color: green;";
}
else {
return "background-color: red;";
}
}
static get template() {
return html`
<div class="icon" style$="[[getColor()]]"></div>
`
}
To set my icon's background color depending on its "is_even" property. My question is: Can I do this in css style tags too? Is there an equivilant syntax like this:
.icon
{
$[[getColor()]]
}
or maybe
.icon
{
background-color$: [[getColor()]];
}
I am trying to edit the style of my ":host" element depending on certain conditions via this kind of syntax and I can't find anything about it.
Thanks in advance :)
javascript css polymer-3.x
asked Nov 11 at 21:17
Robert Bock
84
add a comment |
So, I am fairly new to Polymer but I have worked trough all tutorials I could find and the search function doesn't help me with my problem either.
I am trying to set the style of elements via JS functions. I know that I could use things like:
getColor () {
if(this.is_even) {
return "background-color: green;";
}
else {
return "background-color: red;";
}
}
static get template() {
return html`
<div class="icon" style$="[[getColor()]]"></div>
`
}
To set my icon's background color depending on its "is_even" property. My question is: Can I do this in css style tags too? Is there an equivilant syntax like this:
.icon
{
$[[getColor()]]
}
or maybe
.icon
{
background-color$: [[getColor()]];
}
I am trying to edit the style of my ":host" element depending on certain conditions via this kind of syntax and I can't find anything about it.
Thanks in advance :)
javascript css polymer-3.x
asked Nov 11 at 21:17
Robert Bock
84
I don't think this is possible with plane css. It might be with a css preprocessors language but I haven't looked into this yet. However, the way you are showing in your first code block should be working ?!
– Niklas
Nov 12 at 8:24
I know that the first example works, I never stated the opposite. I just find a syntax like the second one more appealing and thought that Polymer might have such a feature. An extra preprocessor would be a little too much overhead for my project, I just had the hope that the feature already exists and I just could not find it.
– Robert Bock
Nov 12 at 23:33
No unfortunately this isn't possible and I highly doubt that this will be a feature one day.
– Niklas
Nov 13 at 8:08
add a comment |
So, I am fairly new to Polymer but I have worked trough all tutorials I could find and the search function doesn't help me with my problem either.
I am trying to set the style of elements via JS functions. I know that I could use things like:
getColor () {
if(this.is_even) {
return "background-color: green;";
}
else {
return "background-color: red;";
}
}
static get template() {
return html`
<div class="icon" style$="[[getColor()]]"></div>
`
}
To set my icon's background color depending on its "is_even" property. My question is: Can I do this in css style tags too? Is there an equivilant syntax like this:
.icon
{
$[[getColor()]]
}
or maybe
.icon
{
background-color$: [[getColor()]];
}
I am trying to edit the style of my ":host" element depending on certain conditions via this kind of syntax and I can't find anything about it.
Thanks in advance :)
javascript css polymer-3.x
asked Nov 11 at 21:17
Robert Bock
84
So, I am fairly new to Polymer but I have worked trough all tutorials I could find and the search function doesn't help me with my problem either.
I am trying to set the style of elements via JS functions. I know that I could use things like:
getColor () {
if(this.is_even) {
return "background-color: green;";
}
else {
return "background-color: red;";
}
}
static get template() {
return html`
<div class="icon" style$="[[getColor()]]"></div>
`
}
To set my icon's background color depending on its "is_even" property. My question is: Can I do this in css style tags too? Is there an equivilant syntax like this:
.icon
{
$[[getColor()]]
}
or maybe
.icon
{
background-color$: [[getColor()]];
}
I am trying to edit the style of my ":host" element depending on certain conditions via this kind of syntax and I can't find anything about it.
Thanks in advance :)
javascript css polymer-3.x
javascript css polymer-3.x
asked Nov 11 at 21:17
Robert Bock
84
asked Nov 11 at 21:17
Robert Bock
84
asked Nov 11 at 21:17
Robert Bock
84
asked Nov 11 at 21:17
Robert Bock
84
asked Nov 11 at 21:17
Robert Bock
84
84
I don't think this is possible with plane css. It might be with a css preprocessors language but I haven't looked into this yet. However, the way you are showing in your first code block should be working ?!
– Niklas
Nov 12 at 8:24
I know that the first example works, I never stated the opposite. I just find a syntax like the second one more appealing and thought that Polymer might have such a feature. An extra preprocessor would be a little too much overhead for my project, I just had the hope that the feature already exists and I just could not find it.
– Robert Bock
Nov 12 at 23:33
No unfortunately this isn't possible and I highly doubt that this will be a feature one day.
– Niklas
Nov 13 at 8:08
add a comment |
I don't think this is possible with plane css. It might be with a css preprocessors language but I haven't looked into this yet. However, the way you are showing in your first code block should be working ?!
– Niklas
Nov 12 at 8:24
I know that the first example works, I never stated the opposite. I just find a syntax like the second one more appealing and thought that Polymer might have such a feature. An extra preprocessor would be a little too much overhead for my project, I just had the hope that the feature already exists and I just could not find it.
– Robert Bock
Nov 12 at 23:33
No unfortunately this isn't possible and I highly doubt that this will be a feature one day.
– Niklas
Nov 13 at 8:08
I don't think this is possible with plane css. It might be with a css preprocessors language but I haven't looked into this yet. However, the way you are showing in your first code block should be working ?!
– Niklas
Nov 12 at 8:24
I don't think this is possible with plane css. It might be with a css preprocessors language but I haven't looked into this yet. However, the way you are showing in your first code block should be working ?!
– Niklas
Nov 12 at 8:24
I know that the first example works, I never stated the opposite. I just find a syntax like the second one more appealing and thought that Polymer might have such a feature. An extra preprocessor would be a little too much overhead for my project, I just had the hope that the feature already exists and I just could not find it.
– Robert Bock
Nov 12 at 23:33
I know that the first example works, I never stated the opposite. I just find a syntax like the second one more appealing and thought that Polymer might have such a feature. An extra preprocessor would be a little too much overhead for my project, I just had the hope that the feature already exists and I just could not find it.
– Robert Bock
Nov 12 at 23:33
No unfortunately this isn't possible and I highly doubt that this will be a feature one day.
– Niklas
Nov 13 at 8:08
No unfortunately this isn't possible and I highly doubt that this will be a feature one day.
– Niklas
Nov 13 at 8:08
add a comment |
1 Answer
1
active
oldest
votes
Here a sample how to do with css :
DEMO
static get template() {
return html`
<style>
.cfalse {
background-color: red;
}
.ctrue {
background-color: green;
}
</style>
<div class$="icon c[[is_even]]"></div>
`;
}
You may do it with observer :
static get observers() {
return [
'checkColor(is_even)'
]
}
checkColor(e) {
this.set('getColor', !!e ? "background-color: green;" : "background-color: red;" );
}
static get template() {
return html`
<div class="icon" style$="[[getColor]]"></div>` }
Or you may set observer at property decleration :
static get properties() {
return {
is_even: {
type: Boolean,
// Observer method identified by name
observer: 'checkColor'
}
}
}
EDIT : Also it is possible to render the html style with Polymer Lit Element's advantage. In order to use lit element
import { LitElement, html } from '@polymer/lit-element';
then after extend your custom element lit Element's class :
class MyElement extends LitElement {
static get properties(){.....
....
Then finally:
${this.is_even?
html`<div class="icon" style="background-color: green;"></div>`:
html`<div class="icon" style="background-color: red;"></div>`}
For more about litElement
answered Nov 14 at 14:46
HakanC
1,9173713
Thank you for your very elaborate example. I think I will stick to the observer-based solution since my project already relies on a lot of these. I haven't yet looked into LitElement and I don't think I will do for this project, but I will definitely check it out before I start my next one.
– Robert Bock
Dec 2 at 21:14
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253326%2fhow-to-set-css-style-in-polymer-3-using-js-functions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Here a sample how to do with css :
DEMO
static get template() {
return html`
<style>
.cfalse {
background-color: red;
}
.ctrue {
background-color: green;
}
</style>
<div class$="icon c[[is_even]]"></div>
`;
}
You may do it with observer :
static get observers() {
return [
'checkColor(is_even)'
]
}
checkColor(e) {
this.set('getColor', !!e ? "background-color: green;" : "background-color: red;" );
}
static get template() {
return html`
<div class="icon" style$="[[getColor]]"></div>` }
Or you may set observer at property decleration :
static get properties() {
return {
is_even: {
type: Boolean,
// Observer method identified by name
observer: 'checkColor'
}
}
}
EDIT : Also it is possible to render the html style with Polymer Lit Element's advantage. In order to use lit element
import { LitElement, html } from '@polymer/lit-element';
then after extend your custom element lit Element's class :
class MyElement extends LitElement {
static get properties(){.....
....
Then finally:
${this.is_even?
html`<div class="icon" style="background-color: green;"></div>`:
html`<div class="icon" style="background-color: red;"></div>`}
For more about litElement
answered Nov 14 at 14:46
HakanC
1,9173713
Thank you for your very elaborate example. I think I will stick to the observer-based solution since my project already relies on a lot of these. I haven't yet looked into LitElement and I don't think I will do for this project, but I will definitely check it out before I start my next one.
– Robert Bock
Dec 2 at 21:14
add a comment |
Here a sample how to do with css :
DEMO
static get template() {
return html`
<style>
.cfalse {
background-color: red;
}
.ctrue {
background-color: green;
}
</style>
<div class$="icon c[[is_even]]"></div>
`;
}
You may do it with observer :
static get observers() {
return [
'checkColor(is_even)'
]
}
checkColor(e) {
this.set('getColor', !!e ? "background-color: green;" : "background-color: red;" );
}
static get template() {
return html`
<div class="icon" style$="[[getColor]]"></div>` }
Or you may set observer at property decleration :
static get properties() {
return {
is_even: {
type: Boolean,
// Observer method identified by name
observer: 'checkColor'
}
}
}
EDIT : Also it is possible to render the html style with Polymer Lit Element's advantage. In order to use lit element
import { LitElement, html } from '@polymer/lit-element';
then after extend your custom element lit Element's class :
class MyElement extends LitElement {
static get properties(){.....
....
Then finally:
${this.is_even?
html`<div class="icon" style="background-color: green;"></div>`:
html`<div class="icon" style="background-color: red;"></div>`}
For more about litElement
answered Nov 14 at 14:46
HakanC
1,9173713
Thank you for your very elaborate example. I think I will stick to the observer-based solution since my project already relies on a lot of these. I haven't yet looked into LitElement and I don't think I will do for this project, but I will definitely check it out before I start my next one.
– Robert Bock
Dec 2 at 21:14
add a comment |
Here a sample how to do with css :
DEMO
static get template() {
return html`
<style>
.cfalse {
background-color: red;
}
.ctrue {
background-color: green;
}
</style>
<div class$="icon c[[is_even]]"></div>
`;
}
You may do it with observer :
static get observers() {
return [
'checkColor(is_even)'
]
}
checkColor(e) {
this.set('getColor', !!e ? "background-color: green;" : "background-color: red;" );
}
static get template() {
return html`
<div class="icon" style$="[[getColor]]"></div>` }
Or you may set observer at property decleration :
static get properties() {
return {
is_even: {
type: Boolean,
// Observer method identified by name
observer: 'checkColor'
}
}
}
EDIT : Also it is possible to render the html style with Polymer Lit Element's advantage. In order to use lit element
import { LitElement, html } from '@polymer/lit-element';
then after extend your custom element lit Element's class :
class MyElement extends LitElement {
static get properties(){.....
....
Then finally:
${this.is_even?
html`<div class="icon" style="background-color: green;"></div>`:
html`<div class="icon" style="background-color: red;"></div>`}
For more about litElement
answered Nov 14 at 14:46
HakanC
1,9173713
Here a sample how to do with css :
DEMO
static get template() {
return html`
<style>
.cfalse {
background-color: red;
}
.ctrue {
background-color: green;
}
</style>
<div class$="icon c[[is_even]]"></div>
`;
}
You may do it with observer :
static get observers() {
return [
'checkColor(is_even)'
]
}
checkColor(e) {
this.set('getColor', !!e ? "background-color: green;" : "background-color: red;" );
}
static get template() {
return html`
<div class="icon" style$="[[getColor]]"></div>` }
Or you may set observer at property decleration :
static get properties() {
return {
is_even: {
type: Boolean,
// Observer method identified by name
observer: 'checkColor'
}
}
}
EDIT : Also it is possible to render the html style with Polymer Lit Element's advantage. In order to use lit element
import { LitElement, html } from '@polymer/lit-element';
then after extend your custom element lit Element's class :
class MyElement extends LitElement {
static get properties(){.....
....
Then finally:
${this.is_even?
html`<div class="icon" style="background-color: green;"></div>`:
html`<div class="icon" style="background-color: red;"></div>`}
For more about litElement
answered Nov 14 at 14:46
HakanC
1,9173713
edited Nov 15 at 1:58
answered Nov 14 at 14:46
HakanC
1,9173713
answered Nov 14 at 14:46
HakanC
1,9173713
answered Nov 14 at 14:46
HakanC
1,9173713
1,9173713
Thank you for your very elaborate example. I think I will stick to the observer-based solution since my project already relies on a lot of these. I haven't yet looked into LitElement and I don't think I will do for this project, but I will definitely check it out before I start my next one.
– Robert Bock
Dec 2 at 21:14
add a comment |
Thank you for your very elaborate example. I think I will stick to the observer-based solution since my project already relies on a lot of these. I haven't yet looked into LitElement and I don't think I will do for this project, but I will definitely check it out before I start my next one.
– Robert Bock
Dec 2 at 21:14
Thank you for your very elaborate example. I think I will stick to the observer-based solution since my project already relies on a lot of these. I haven't yet looked into LitElement and I don't think I will do for this project, but I will definitely check it out before I start my next one.
– Robert Bock
Dec 2 at 21:14
Thank you for your very elaborate example. I think I will stick to the observer-based solution since my project already relies on a lot of these. I haven't yet looked into LitElement and I don't think I will do for this project, but I will definitely check it out before I start my next one.
– Robert Bock
Dec 2 at 21:14
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253326%2fhow-to-set-css-style-in-polymer-3-using-js-functions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I don't think this is possible with plane css. It might be with a css preprocessors language but I haven't looked into this yet. However, the way you are showing in your first code block should be working ?!
– Niklas
Nov 12 at 8:24
I know that the first example works, I never stated the opposite. I just find a syntax like the second one more appealing and thought that Polymer might have such a feature. An extra preprocessor would be a little too much overhead for my project, I just had the hope that the feature already exists and I just could not find it.
– Robert Bock
Nov 12 at 23:33
No unfortunately this isn't possible and I highly doubt that this will be a feature one day.
– Niklas
Nov 13 at 8:08