I need to share styles across multiple Polymer elements. Is it acceptable to create a "styles.html" file and then import that into my different elements or would this start to have performance implications as the app grows? I know for 0.5 there was a core-styles but it kind of seems unnecessary if imports will work just as well.
styles.html
<style>
button {
background: red;
}
</style>
my-button.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../styles/main-styles.html">
<link rel="import" href="../behaviors/mixins.html">
<dom-module id="my-button">
<template>
<button>{{text}}</button>
</template>
</dom-module>
<script>
Polymer({
is: 'my-button',
behaviors: [ButtonBehavior]
})
</script>
As suggested in discussion on issue logged in chromium to deprecate /deep/ and ::shadow selectors:
say your common styles are in a file called
common-style.css
In your component have a style tag that is like this
#import url( '/common-style.css' );
This inverts the control : instead of broadcasting your styles for
anyone to use, style consumers must know which styles they want and
actively request them, which helps avoid conflicts. With browser
caching, there's essentially no penalty to so many imports, in fact it
is likely faster than cascading the styles through multiple shadow
trees using piercers.
You can create a style.css and import it in your components by putting a css #import in your template.
There won't be multiple network calls, since browser is going to cache it when your first component loads and for subsequent components it will picked from cache.
We have been using webcomponents in our production apps for a while now using this technique since /deep/ has been deprecated and there has not been any signification performance difference.
You can use Polymer's shared styles. Create a document with your styles:
<dom-module id="shared-styles">
<template>
<style>
/* Your styles */
</style>
</template>
</dom-module>
And then import this to your elements and in their definitions add include="shared-styles" to the <style> tag.
Share styles by creating a dom-module for them, just like other custom elements. To include the shared styles in a custom element, use <style include="style-module-name">. Full example below.
shared-styles.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="shared-styles">
<template>
<style>
/* CSS goes here */
</style>
</template>
</dom-module>
some-element.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="some-element">
<template>
<style include="shared-styles">
/* Element specific styles go here */
</style>
<!-- HTML goes here -->
</template>
<script>
Polymer({
is: 'some-element',
properties: {
}
});
</script>
</dom-module>
As of Polymer 1.1, the polymer project authors recommend creating and importing a style module to address this issue.
To share style declarations between elements, you can package a set of style declarations inside a element. In this section, a holding styles is called a style module for convenience.
A style module declares a named set of style rules that can be imported into an element definition, or into a custom-style element.
See more: https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules
Related
this question is about vue.js, that operates on a boilerplate that using webpack configuration.
i need to dynamically pass sass variables from component father to component son (for the simplicity of naming).
on component father i have access to $color variable from the style tag.
and i'm calling to son component using this html template:
// father component
<template>
<son></son>
</template>
<style lang='sass' scoped>
#import 'assets/sass/color';
</style>
imported sass variable, $color need to come from father and change the background of son
let's say son is just a simple div.
// son component
<template>
<div></div>
</template>
<style lang=sass scoped>
div {
width: 200px;
height: 200px;
}
</style>
what's the correct way to do it?
you can import sass and use binding like,
<p v-bind:style="[baseStyles, overrideStyles]">
baseStyles and overrideStyles
</p>
EDIT
or you can do something like
<template>
<div v-bind:class="$style.my_component">Hello</div>
</template>
<style module>
.my_component {
color: purple; // still the best color ever
}
</style>
Besides of your scoped stylings you could also use global ones in the same component which would get exposed to the child component. Just add a new style tag to your component, without using the scoped key.
Your component could look somehow like that.
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
Source
I'm creating a polymer datepicker using pikaday. Sadly it seems like I got something wrong.
I'd like to import pikaday.js and pikaday.css the right way.
At first I had a simple script-tag below my closing dom-module-tag, like
</dom-module>
<script src="../../pikaday/pikaday.js"></script>
<script>
Polymer({
//....
This way, the datepicker was created as expected. But after reading this SO-Thread I was under the impression I was supposed to import the js-file like this:
<link rel="import" href="../../paper-input/paper-input-behavior.html">
<link rel="import" href="../../paper-input/paper-input-error.html">
<link rel="import" href="../../pikaday/pikaday.js">
//more imports....
But after "fixing" my import, the file pikaday.js seems not to be visible from inside my component:
Uncaught ReferenceError: Pikaday is not defined
Furthermore I'm confused about using external css. After reading this guide it seems like I was supposed to copy & paste the contents of the provided css-file into a my-datepicker-style.html and to import it into my template like this:
<dom-module id="my-datepicker">
<template>
<style include="my-datepicker-style"></style>
<style>
:host {
//more css
I'm confused about the need to copy & paste existing code.
Until ES6 imports are more common, you need some kind of workaround for referencing dependencies.
The problem with <script> tag is that when it appears multiple times, it will be processed multiple times. This is not true for <link rel="import">. Same href will be processed only once.
You cannot, however, import javascript directly. The trick is to create pikaday-import.html file with the script reference
<script src="../../pikaday/pikaday.js"></script>
You then import that in your element's html
<link rel="import" href="pikaday-import.html" />
<dom-module id="my-datepicker"></dom-module>
This is the technique for example the <marked-element> uses.
This way instances of <my-datepicker> load pickaday only once. Unfortunately, if there are other components which reference it, you could end up loading the dependency multiple times.
I have a polymer 1.x element called input-header and it looks like this
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="input-header">
<template>
<style>
.dropdown-content {
padding: 0px;
}
</style>
<paper-toolbar>
<paper-icon-button icon="mail"></paper-icon-button>
<iron-icon icon="image:transform"></iron-icon>
<div class="title">Left</div>
<paper-menu-button horizontal-align="right" vertical-align="top">
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<div class="title">Right</div>
</paper-menu-button>
</paper-toolbar>
</template>
<script>
Polymer({
is: 'input-header',
properties: {
label: {
type: String,
notify: true
}
}
});
</script>
</dom-module>
I have included it in my index.html as follows :
<body unresolved id="app">
<input-header label="Left"></input-header>
</body>
But for some reason, the paper-icon or iron-icons don't show up as seen here
Update : See this working demo
You have to import paper-icon-button, iron-icon and image-icons.html, either globally or in this particular element. Like this
<!-- import the iron-icon & paper-icon-button custom element -->
<link rel="import"
href="path/to/iron-icons/iron-icons.html">
<!----- this is required for iron-icon image:transform to work ----->
<link rel="import"
href="path/to/iron-icons/image-icons.html">
<!---------------------------------------------->
<link rel="import"
href="path/to/paper-icon-button/paper-icon-button.html">
<link rel="import"
href="path/to/paper-toolbar/paper-toolbar.html">
<link rel="import"
href="path/to/paper-menu-button/paper-menu-button.html">
I assume that you have installed/downloaded the iron-icon and other elements. If you are using bower do this
bower install --save PolymerElements/iron-icon
bower install --save PolymerElements/paper-icon-button
find bower install command for other elements from Polymer Element Catalog
The iron-icons bug is an artifact of the Polymer starter kit that includes a file called my-icons.html. This file is identically named as one of the low level iron-icons files. naturally it overrides the one we really want.
Renaming my-icons.html to anythingElse-icons.html or to my-icons.html.buggy will instantly make the iron-icons available. Woohoo.
It seems also, since Polymer 2.0.1,
paper-icon-button does not include a default icon set.
So, PolymerElements/iron-icons/iron-icons.html should be included separately.
Here is the full explanation:
paper-icon-button does not include a default icon set. To use icons
from the default set, include
PolymerElements/iron-icons/iron-icons.html, and use the icon attribute
to specify which icon from the icon set to use.
For More detailed information visit:
https://www.webcomponents.org/element/PolymerElements/paper-icon-button
How can I import core elements and paper elements in JSFiddle.
I'm importing polymer through those statements:
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/polymer.js"></script>
How can import for example core-input or paper-input?
Yes from the polymer project site or I guess your cloudflare cdn if you know the location
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
This is just for dev and not production.
If you goto polymer elements then choose your element and click on the button that says Get Element it will give you a popup with an import link.
Also you can get a link for all core or paper elements from here
A good alternative - still a work in progress - is https://ele.io/
Ele (call it “Ellie”) is a streamlined environment for exploring, experimenting with, and sharing reusable custom HTML elements made with Web Components.
To test a simple component written in Polymer 1.0 I use this snippet:
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">
<dom-module id="proto-element">
<template>
<span>I'm <b>proto-element</b>. Check out my prototype.</span>
</template>
</dom-module>
<script>
Polymer({
is: "proto-element",
ready: function() {
//...
}
});
</script>
<proto-element></proto-element>
http://jsfiddle.net/MartyIX/84b5sabw/
i have two elements, in different html files, how can i show the resume of these elements in the core-component-core?, when i join both files in one html file, looks well, but in different files does not. Only show the "master" element (element-one).
Component 1:
<!--
##### Example:
<element-one name="ruben"></element-one>
#element element-one
#blurb Firts element.
#status alpha
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="element-two.html">
<polymer-element name="element-one" attributes="name">
<template> ... </template>
<script>
Polymer( 'element-one', { ... });
</script>
</polymer-element>
Component 2:
<!--
##### Example:
<element-two subname="cid"></element-two>
#element element-two
#blurb Second element.
#status alpha
-->
<polymer-element name="element-two" attributes="subname">
<template> ... </template>
<script>
Polymer( 'element-two', { ... });
</script>
</polymer-element>
The component-page link on https://github.com/Polymer/core-component-page doesn't point anywhere meaningful, so it's ironically difficult to view the docs for the thing that generates the docs. (I've filed a bug about that.)
But if you look at the source, you'll see two attributes on <core-component-page>. sources takes an array of .html files corresponding to each element you want documented.
An example of this is the index.html source for <google-map>, which renders as this component page.