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.
Related
I have an Electron App and Within my index.html file, I import a number of html files in the <head> like so:
<link rel="import" href="settings.html">
<link rel="import" href="dashboard.html">
<link rel="import" href="locker.html">
For now, each file is the same, but with a different header, and follows the same template:
<template class="section-template">
<section id="locker" class="wrapper">
<div class="inner">
<h3>Locker</h3>
</div>
</section>
</template>
In my JavaScript I have the following function that triggers on page load:
console.log(`Importing all to DOM`);
const links = document.querySelectorAll('link[rel="import"]')
Array.prototype.forEach.call(links, function(link){
var content = link.import;
var el = content.querySelector('.section-template');
console.log(el);
})
This is selecting all the imported files, calling them and then it should be selecting the whole file based on the section-template class.
For some reason, el is null and I cannot figure out why. Logging out the content shows this. Not sure why the content is appearing in the <head>, though I think this is part of the issue
http://imgur.com/a/612c8
I've copied the HTML of the locker.html file into JSFiddle, and ran the JavaScript on document which works fine.
A little confused as to why this isn't working.
Update: Example to how this should work here under imports
https://www.html5rocks.com/en/tutorials/webcomponents/imports/
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 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
I'm using a simple Polymer object with Bootstrap and I want to use the tooltip (as described here) within the Polymer object.
Let's say this is my polymer:
<link rel="import" href="../components/bower_components/polymer/polymer.html">
<polymer-element name="my-polymer">
<template>
<div data-toggle="tooltip" tooltip="with a tooltip">I am a simple Polymer</div>
</template>
<script>
Polymer({
domready: function() {
//$((this.shadowRoot || this).querySelector('[data-toggle="tooltip"]')).tooltip(); // not wotking
//$("[data-toggle='tooltip']").tooltip(); // not wotking
}
});
</script>
</polymer-element>
By design, in order to get the tooltip wotking we need to execute this command:
$("[data-toggle='tooltip']").tooltip();
But because of the shadow DOM I can't execute this command.
How can I get this code to work with the Bootstrap tooltip?
I know this doesn't answer your question directly but more giving you a "Polymer" alternative. Polymer 0.5 has a tooltip element (they look a lot like the example tooltips on the link you posted)
https://www.polymer-project.org/0.5/docs/elements/core-tooltip.html
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/