I would like to know if it's possible to combine host-context with element user states.
For example:
<polymer-element name="my-element">
<template>
<style>
:host(:hover) {
background-color: blue; // For all other situations
}
:host-context(my-app) {
// TODO: Apply darkblue ONLY when my-element is hosted within my-app
// and the user state of my-element is hover.
background-color: darkblue;
}
</style>
Hello
</template>
<script src="my-element.js"></script>
</polymer-element>
I tried a lot of combinations with host-context and :hover but none of them seem to work.
Thanks for any help in advance!
The spec doesn't specifically mentions this but it is possible to combine both the :host-context and :host selector to get the correct result.
<polymer-element name="my-element">
<template>
<style>
:host(:hover) {
background-color: blue; // For all other situations
}
:host-context(my-app):host(:hover) {
background-color: darkblue;
}
</style>
Hello
</template>
<script src="my-element.js"></script>
</polymer-element>
Reading through the spec, that doesn't appear to be possible. However, it is possible to do the following.
<polymer-element name="my-element">
<template>
<style>
:host(:hover) {
background-color: blue; // For all other situations
}
:host-context(my-app)::shadow #wrapper:hover {
background-color: darkblue;
}
</style>
<div id="wrapper">Hello</div>
</template>
<script src="my-element.js"></script>
</polymer-element>
Related
I have a trouble with styling my components. When i built my structure like this:
<dom-module id="content-area">
<template>
<my-button class='red'>Hello</my-button>
<my-button class='green'>Hello</my-button>
</template>
</dom-module>
And how i style it with external html file custom-style.html
<custom-style>
<style is="custom-style">
:host(.red) {
color: red;
}
:host(.green) {
color: green;
}
</style>
</custom-style>
What did i do wrong ? Any advice ?
In order to use a custom-style, which you may share with your all components:
As #Alberto Marin explained, include the style file
<link rel="import" href="custom-style.html">
<dom-module id="content-area">
<template>
<style include="custom-stle">
</style>
<my-button class='red'>Hello</my-button>
<my-button class='green'>Hello</my-button>
</template>
</dom-module>
And at custom-style.html wrap your style block in and elements, like this:
<dom-module id="custom-style">
<template>
<style>
<!-- Your shared styles -->
</style>
</template>
</dom-module>
If you want to style your component with an external file you have to do it as the Polymer documentation says : https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom
In your case, where you have the component:
<link rel="import" href="custom-style.html">
on custom-style.html
<style>
:host(.red) {
color: red;
}
:host(.green) {
color: green;
}
</style>
I need to make the image in paper-icon-button round. So I'm looking if there are any mixins available to the custom image. I can't find one within documentation.
Screenshot showing the expected outcome:
Any other elegant workarounds are welcome.
I was unable to reach the img Element with the ::content selector in the latest Polymer1.0 (1.8.1). the way to target it is:
paper-icon-button::shadow #icon::shadow img {
border-radius: 50%;
}
There aren't any mixins that could change the image's border radius, but you could style it in your <dom-module> with:
::content paper-icon-button img {
border-radius: 50%;
}
HTMLImports.whenReady(_ => {
Polymer({
is: 'x-foo'
});
});
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
paper-icon-button {
width: 100px;
height: 100px;
}
::content paper-icon-button img {
border-radius: 50%;
}
</style>
<paper-icon-button src="http://placekitten.com/300/300"></paper-icon-button>
</template>
</dom-module>
</body>
codepen
I would like to be able to pass CSS width to my custom element's shadow DOM.
The custom element, called my-list, is defined as below:
<dom-module id="my-list">
<style>
#container {
width: var(width, 100%);
}
</style>
<template>
<div id="container">
<content></content>
</div>
</template>
<script>
Polymer({
is: 'my-list'
});
</script>
</dom-module>
It is used like this:
<style type="text/css">
.medium {
width: 500px;
}
</style>
<my-list class="medium">
<list-entry>1</list-entry>
<list-entry>2</list-entry>
</my-list>
However, the 500px width is not applied; the width is still 100%.
What am I doing wrong?
CSS variable names need to start with --
<dom-module id="my-list">
<template>
<style>
#container {
width: var(--my-list-width, 100%);
}
</style>
<div id="container">
<content></content>
</div>
</template>
<script>
Polymer({
is: 'my-list'
});
</script>
</dom-module>
Hint: the <style> tag should be within the <template> tag (this was explained differently a while back in the docs but changed later).
If you use Polymer features you need to add is="custom-style" for Polymer to know it needs to process (polyfill) the styles inside this style tag.
<style is="custom-style" type="text/css">
/* .medium { I think this should work but I fear it doesn't - haven't investigated yet*/
:root { /*this works */
--my-list-width: 500px;
}
</style>
<my-list class="medium">
<list-entry>1</list-entry>
<list-entry>2</list-entry>
</my-list>
I updated all my Polymer elements to the latest version and now my own elements won't show anymore.
In the head:
<link rel="import" href="my-elements/my-test/my-test.html">
In the body:
<my-test></my-test>
The elements code:
<dom-module id="my-test">
<template>
<style>
:host {
position: relative;
height: 100px;
width: 200px;
background-color: #000;
color: #FFF;
}
</style>
<div>Huhu</div>
</template>
<script>
Polymer({
is: "my-test"
});
</script>
All the other elements like <paper-checkbox></paper-checkbox> are still working. What has changed?
I'm trying to get a grasp on polymer and the shadow dom. Is it possible to use custom elements inside of custom elements when dealing with dynamic content? For example, in WordPress I can use <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> to list out my menu links. If I create a <main-menu> element for my menu, how would I wrap another custom element around each <li>?
Here is my main-menu html file:
<link rel="import" href="/components/polymer/polymer.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/paper-tabs/paper-tabs.html">
<polymer-element name="main-menu">
<template>
<style>
.main-menu ::content ul li {
float: left;
list-style-type: none;
margin-left: 20px;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #03a9f4;
}
core-toolbar ::content ul li a {
color: white;
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
}
</style>
<core-header-panel>
<core-toolbar>
<div class="main-menu">
<paper-tabs>
<content select="li"><paper-tab></paper-tab></content>
</paper-tabs>
</div>
</core-toolbar>
</core-header-panel>
</template>
<script>
Polymer({});
</script>
</polymer-element>
Obviously, using <content select="li"><paper-tab></paper-tab></content> doesn't accomplish what I want to do but I am not sure how I would go about wrapping <paper-tab> around each <li>
In this instance, you'll need to use the getDistributedNodes method to grab all of those lis, turn them into an Array, and hand that off to a repeating template. This thread has a bit more explanation: Element transclusion
Here's an example (http://jsbin.com/hazay/9/edit):
<polymer-element name="main-menu">
<template>
<style>
:host {
display: block;
}
::content > * {
display: none;
}
</style>
<content id="c" select="li"></content>
<paper-tabs>
<template repeat="{{item in items}}">
<paper-tab>{{item.textContent}}</paper-tab>
</template>
</paper-tabs>
</template>
<script>
Polymer({
items: [],
domReady: function() {
// .array() is a method added by Polymer to quickly convert
// a NodeList to an Array
this.items = this.$.c.getDistributedNodes().array();
}
});
</script>
</polymer-element>
<main-menu>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</main-menu>