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;
}
Related
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.
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>
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.
I am new with polymer and I am experimenting a little with it. How can i set my component to full height?
This is what i have and for some reason i can't get it to work. It only has the height of his content:
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="reactive-navbar">
<style>
div {
display: block;
width: 20%;
height: 100%;
background-color: #2c3e50;
}
</style>
<template>
<div>
<content></content>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "reactive-navbar",
});
</script>
If you want your Polymer element to be affected by your style instead of your div, you can change that div in your style tag to :host to make your style affect the host https://www.polymer-project.org/1.0/docs/devguide/styling.html
Updated code:
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="reactive-navbar">
<style>
:host {
display: block;
width: 20%;
height: 100%;
background-color: #2c3e50;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: "reactive-navbar",
});
</script>
In your index.html file, set style for html tag:
html {
height: 100%;
}
So, I am aware the web components, Shadow DOM and such is only implememted natively in Chrome today.
For support in Firefox, Polyfill is needed. According to the website, Polymer has polyfill support in Firefox:
https://www.polymer-project.org/resources/compatibility.html
but when I have made a very simple page, it looks completely screwed up i Firefox. But, if I try the Polymer website in Firefox, it works there without any obvious problems.
Test URL: http://misc.snapcode.se/polymer/
Here is how my test-site looks in Chrome:
and in Firefox:
The code can be seen below.
But they say that Firefox has Polyfill support, and it supports CSS, so why is the layout/design so screwed up?
How come they get their own site to work in Firefox, but a super-simple site I build is screwed up?
If I try out the paper-dropdown in FF, it works fine on their demo site, but if I use the paper-dropdown on my own site, constructed the same way as described on the polymer website, its completely screwed up. Why?
What am I missing?
EDIT 1
I found out that to get the header panel "right" in Firefox, I have to remove the CSS in index.php for the div {...}:
That seems to me like the Shadow DOM isnt working correctly, even though I have imported webcomponents.js, which should be the Polyfill needed.
EDIT 2
I have looked in Firefox using Firebug and I can see the following:
As I can see it, webcomponents.min.js is imported (I tested different js files), and there is some stuff talking about ShadowDOMPolyfill. So, it is even weirder now I think.
EDIT 3
I debugged Firefox using Firebug, image below. As I see it, ShadowDOM using Polyfill is indeed detected and used. Do you agree? =)
index.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LEO</title>
<script src="/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/components/font-roboto/roboto.html">
<link rel="import" href="/components/core-header-panel/core-header-panel.html">
<link rel="import" href="/components/core-toolbar/core-toolbar.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-shadow/paper-shadow.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/my-components/logout-button/logout-button.html">
<link rel="import" href="/my-components/assignment-card/assignment-card.html">
<style>
html, body {
height: 100%;
margin: 0px;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
paper-shadow {
width: 300px;
background: #FFF;
margin: 10px;
padding: 10px;
}
div {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body fullbleed layout vertical>
<?php
session_start();
if (!isset($_SESSION['session_userId']))
{
echo "Not logged in";
}
?>
<core-header-panel flex layout>
<core-toolbar>
<div flex>LEO 1</div>
<div>
<logout-button></logout-button>
</div>
</core-toolbar>
<div id="id1" horizontal layout >
<assignment-card></assignment-card>
</div>
</core-header-panel>
<script>
</script>
</body>
</html>
assignment-card.html
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/core-item/core-item.html">
<link rel="import" href="/components/core-menu/core-menu.html">
<link rel="import" href="/components/core-dropdown/core-dropdown.html">
<link rel="import" href="/components/core-dropdown-menu/core-dropdown-menu.html">
<link rel="import" href="/components/paper-item/paper-item.html">
<link rel="import" href="/components/paper-menu/paper-menu.html">
<link rel="import" href="/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/components/core-ajax/core-ajax.html">
<link rel="import" href="/components/core-tooltip/core-tooltip.html">
<polymer-element name="assignment-card">
<template>
<style>
input {
padding: 10px;
font-family: 'RobotoDraft', sans-serif;
font-size: 16px;
margin: 0px;
}
core-icon[icon="error"] {
width: 40px;
height: 40px;
color: red;
}
core-icon[icon="perm-identity"] {
width: 40px;
height: 40px;
}
core-icon[icon="lock-outline"] {
width: 40px;
height: 40px;
}
core-icon[icon="arrow-forward"] {
color: #e4e4e4;
}
core-icon {
color: #808080;
}
paper-button {
background-color: #6fd177;
margin: 0px;
}
core-field {
margin-bottom: 10px;
}
div[id="container"] {
background: #C0C0C0;
padding: 5px;
}
div
{
margin: 10px;
font-size: 12px;
}
</style>
<div id="container" layout vertical >
<div layout horizontal>
<core-label >Starttid: 14:13</core-label>
<core-label flex></core-label>
<core-label >Uppdrags-id: 13213241</core-label>
</div>
<div><core-label>Kertin Karlsson,</core-label></div>
<div layout horizontal relative>
<paper-dropdown-menu raised label="-Välj" style='background: #fff; padding: 5px; margin: 0px; margin-right: 15px; ' flex>
<paper-dropdown class="dropdown" layered="true">
<core-menu class="menu">
<template repeat="{{assistant in assistants}}">
<paper-item name="{{assistant.id}}">{{assistant.name}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<paper-button raised>Tilldela</paper-button>
</div>
</div>
<core-ajax
id="coreAjax1"
url="http://192.168.1.108/relay.php"
method="post"
params='{{json}}'
handleAs="json"
on-core-response="{{handleResponse}}">
</core-ajax>
</template>
<script>
Polymer('assignment-card', {
ready: function() {
this.assistants = [
{id: 1, name: 'Kalle'},
{id: 2, name: 'Ted'},
{id: 3, name: 'Micke'},
{id: 4, name: 'Bengt'},
];
}
});
</script>
</polymer-element>
logout-button.html
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/core-ajax/core-ajax.html">
<polymer-element name="logout-button">
<template>
<style>
paper-button
{
background: #DF0101;
color: white;
}
</style>
<core-ajax
id="coreAjax1"
url="http://192.168.1.108/logout.php"
on-core-response="{{handleResponse}}">
</core-ajax>
<paper-button raised id="btnLogout" on-click="{{onLogoutClicked}}">Logga ut
<core-icon icon="highlight-remove"></core-icon>
</paper-button>
</template>
<script>
Polymer('logout-button', {
onLogoutClicked: function()
{
this.$.coreAjax1.go();
},
handleResponse: function(e)
{
document.location.href = '/index.php';
}
});
</script>
</polymer-element>
The problem persist because firefox does not create shadow DOM but it displays shadow content directly. So the following snippet screws the overall view:
paper-shadow {
width: 300px;
background: #FFF;
margin: 10px;
padding: 10px;
}
div {
padding: 10px;
margin: 10px;
}
If you remove that code and add some specific code then it will work. The snippet for index.php with specific code is given below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LEO</title>
<script src="/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/components/font-roboto/roboto.html">
<link rel="import" href="/components/core-header-panel/core-header-panel.html">
<link rel="import" href="/components/core-toolbar/core-toolbar.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-shadow/paper-shadow.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/my-components/logout-button/logout-button.html">
<link rel="import" href="/my-components/assignment-card/assignment-card.html">
<style>
html, body {
height: 100%;
margin: 0px;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
assignment-card,
logout-button{
margin: 10px;
}
logout-button paper-button{
top: 3px;
}
</style>
</head>
<body fullbleed layout vertical>
<?php
session_start();
if (!isset($_SESSION['session_userId']))
{
echo "Not logged in";
}
?>
<core-header-panel flex layout>
<core-toolbar>
<div flex>LEO 1</div>
<div>
<logout-button></logout-button>
</div>
</core-toolbar>
<div id="id1" horizontal layout >
<assignment-card></assignment-card>
</div>
</core-header-panel>
<script>
</script>
</body>
</html>