How do I apply a custom style to a specific element only? - css

I'm developing a theme-able Polymer web component. As per the custom-style documentation I'm doing the following:
<link rel="import" href="themes/my-element-theme.html">
<style is="custom-style" include="my-element-theme"></style>
However, this is a blunt instrument as it applies the custom theme to all my elements.
One solution is to scope all my theme styles to a CSS class as follows:
:root custom-element.my-element-theme {
font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
}
However, this makes it difficult to apply a custom style to a whole document.
Is there a way to apply custom styles to elements more selectively, say using CSS selectors? What is best practice?

You definitely can use selectors to selectively apply styles to your themeable elements.
It's best to use custom properties and mixins and set their values to targeted elements. Here's an example:
<!DOCTYPE html>
<html>
<head>
<link href="http://polygit.org/components/polymer/polymer.html" rel="import" />
<style is="custom-style">
.container1 my-elem {
--my-elem-span: {
color: red;
}
}
.container2 my-elem {
--my-elem-span: {
color: blue;
}
}
</style>
</head>
<body>
<div class="container1">
<my-elem>hello red</my-elem>
</div>
<div class="container2">
<my-elem>hello blue</my-elem>
</div>
<dom-module id="my-elem">
<template>
<style>
:host { display: block; }
:host span {
#apply(--my-elem-span);
}
</style>
<span><content></content></span>
</template>
<script>
Polymer({
is: 'my-elem'
});
</script>
</dom-module>
</body>
</html>
And you can externalize you styles like you did by placing the css rules in a separate styles module.
<dom-module id="my-elem-theme">
<template>
<style>
.container1 my-elem {
--my-elem-span: {
color: red;
}
}
.container2 my-elem {
--my-elem-span: {
color: blue;
}
}
</style>
</template>
</dom-module>
You then import the way you do:
<link rel="import" href="my-elem-theme.html">
<style is="custom-style" include="my-elem-theme"></style>

Related

Polymer - class doesn't load in template?

I have a custom class:
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-voltage">
<template is="auto-binding">
<div class="circle">{{volts}}</div>
<div class="circle">{{time}}</div>
<div class="circle">{{temp}}</div>
</template>
<script>
//etc
</script>
</dom-module>
In the shared-styles.html file I have the definition for the circle class:
.circle {
display: inline-block;
width: 64px;
height: 64px;
text-align: center;
color: #555;
border-radius: 50%;
background: #ddd;
font-size: 30px;
line-height: 64px;
}
However, the class doesn't load. I don't get the circle around the text, nor anything else defined there. What am I missing? Can I not use classes in templates? Do I need to import it somehow else?
I'm pretty sure you want something like this:
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-voltage">
<template is="auto-binding">
<style include="shared-styles">
/* any extra styles can go here */
</style>
<div class="circle">{{volts}}</div>
<div class="circle">{{time}}</div>
<div class="circle">{{temp}}</div>
</template>
<script>
//etc
</script>
</dom-module>
Note the <style> block.

Why isn't this basic Sass nesting example working?

I'm starting to learn Sass and started to check some nesting examples. This is the first one I tried and it's not working:
body {background:#eee;}
.blog .entry {
p{
color:#ff0;
}
}
This is my markup:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.scss">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body class="blog">
<div class="entry">
<h1>My blog post</h1>
<p class="blue">Text <a>link</a></p>
</div><!-- .entry -->
</body>
</html>
The background of the body does change to #eee, but the paragraph stays the same (unless I un-nest it to just p{} ).
First you cannot link an SCSS file just like CSS, you have to compile it to CSS then link the compiled file.
In order to nest properly in SCSS you can do the following:
.blog {
.entry {
p{
color:#ff0;
}
}
}
Your markup and Sass work as you can see here: https://jsfiddle.net/6pa0r48g/
Please check the compiled CSS directly if you are overloading your css rule by another one (i. e. by formatting .blue).
Also this would be more readable:
body {
background: #eee;
}
.blog {
.entry {
p {
color: #ff0;
}
}
}
I would recommend to not go any deeper with your nesting in Sass.

How to style inner elements of custom Polymer element using external styles?

Unable to style an element using Shadow DOM with Polymer 1.x or 2.x. Consider the following custom element in Polymer 2.0:
<link rel="import" href="../polymer/polymer.html">
<!--
`semantic-ui-button`
#demo demo/index.html
-->
<dom-module id="polymer-button">
<template>
<div class$="button {{size}}">{{label}}</div>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() {
return 'polymer-button';
}
static get properties() {
return {
label: {
type: String,
value: 'polymer-element'
},
size: { type: String }
};
}
}
window.customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
in the demo:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>polymer-element demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../polymer-element.html">
<style is="custom-style" include="demo-pages-shared-styles"></style>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.button {
background: #ccc;
border-radius: 4px;
color: #444;
}
.button.big {
font-size: 1rem;
padding: 6px;
}
</style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic polymer-element demo</h3>
<demo-snippet>
<template>
<polymer-button label="Demo"></polymer-button>
</template>
</demo-snippet>
</div>
</body>
</html>
The styles defined in the demo for .button and .button.big are not applied to the shadow element; however, in Polymer 1.x the styles are applied if we use ShadyDOM:
<link rel="import" href="../polymer/polymer.html">
<!--
`polymer-button`
#demo demo/index.html
-->
<dom-module id="polymer-button">
<template>
<div class$="button {{size}}">{{label}}</div>
</template>
<script>
Polymer({
is: 'polymer-button',
properties: {
label: { type: String }
},
});
</script>
</dom-module>
is there a way to select/style these inner elements using external styles?
Below is a visual representation of what I said above in order of appearance:
Polymer 1.x using Shadow DOM
Polymer 1.x using ShadyDOM
Polymer 2.x
To enable styling points, use CSS variables/mixins.
Add a <style> tag to your element's template:
<dom-module id="polymer-button">
<template>
<style>
.button {
#apply --my-button-mixin;
}
.button.big {
#apply --my-button-big-mixin;
}
</style>
...
</template>
</dom-module>
Specify the mixin in a container element:
<dom-module id="x-foo">
<template>
<style>
polymer-button {
--my-button-mixin: {
background: red;
color: white;
};
}
</style>
<polymer-button label="Red button"></polymer-button>
</template>
</dom-module>
...or in index.html:
<body>
<custom-style>
<style>
polymer-button {
--my-button-mixin: {
background: red;
color: white;
};
}
</style>
</custom-style>
<polymer-button label="Red button"></polymer-button>
</body>
codepen (Polymer 1)
codepen (Polymer 2)
Alternately, you can add a <style> element with an #import url rule inside your custom element <template> that will import an external stylesheet:
<template>
<style>
#import url( external.css )
</style>
<div class$="button {{size}}">{{label}}</div>
</template>
In your CSS stylesheet (example: external.css) you can define standard CSS:
.button {
background: #ccc;
border-radius: 4px;
color: #444;
}
.button.big {
font-size: 1rem;
padding: 6px;
}

Polymer element doesn't display background-image passed with Custom CSS properties

I'm having trouble understanding why I can't pass a custom CSS property for a background image to a polymer element. Using CCS properties for styling Polymer elements is explained here: https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details and this works for some elements (example the grey background in my code below).
<body>
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
height: 300px;
background-color: grey;
color: var(--container-text, white);
background-image: url(var(--container-background, 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg'));
/* THIS WORKS
background-image: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
*/
}
</style>
<div class='container'>Text color is correct, but no background image</div>
</template>
<script>
Polymer({ is: 'my-element'});
</script>
</dom-module>
<my-element></my-element>
</body>
I have two question:
Why isn't this working?
What is the best way to solve this?
Code is here: http://jsbin.com/yuxobexepe/edit?html,output
Thanks!
Paul
You are mixing the definition/usage of CSS property. Here is a working JSBIN of your problem:
<html>
<head>
<base href="http://polygit.org/polymer/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
height: 300px;
background-color: grey;
color: var(--container-text, blue);
background-image: var(--container-background, "default.png");
--container-background: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
}
</style>
<div class='container'>Text color is correct, but no background image</div>
</template>
<script>
addEventListener('WebComponentsReady', function() {
Polymer({ is: 'my-element'});
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
background-image is using the value of --container-background if it exists, or default to what you give. Then you define separately the --container-background property, usually, outside of the component itself.

Custom CSS3 Variable Not Working in Polymer 1.0 Starter Kit

-My css3 vars are not showing. Here is the setup (scripts are removed and assumed all is well):
<dom-module id="my-app">
<style>
.tester {
color: var(--my-app-tester-color);
}
</style>
<template>
<div class="tester">abc</div>
</template>
</dom-module>
// app-theme.html:
<style is="custom-style">
my-app {
--my-app-tester-color: red;
}
</style>
I am following Rob's Polycast tutorial but nothing works.

Resources