Hi all I am trying to create a custom Polymer Element that uses the < x-flipbox > element inside its template tag.
However it seems that the < x-flipbox > tag it is only working on the index page and not inside my custom elements.
This is my custom element, what am I doing wrong?
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/x-tag-imports/x-tag-flipbox.html">
<polymer-element name="nautes-flipbox" attributes="">
<template>
<style>
:host {
display: block;
}
</style>
<x-flipbox>
<div>I'm the front face.</div>
<div>I'm the back face.</div>
</x-flipbox>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
The element above is just showing the two divs.
<x-flipbox>
<div>I'm the front face.</div>
<div>I'm the back face.</div>
</x-flipbox>
This one pasted in the index.html shows only one div (as it should).
In addition, how can I debug this kind of issues? (I am new to polymer and the console is not giving me any error/warning)
You don't need to include it as a import, that's an old wrapper thing the Polymer folks wrote for including X-Tag elements (it's probably what's complicating this). You can simply include the JS (as a <script>) and CSS (as a <link rel="stylesheet">) inside of the x-flipbox repo's src directory where you have your <link rel="import"> for the flipbox
Repo: https://github.com/x-tag/flipbox/tree/master/src
Related
I'm new to polymer. Below code is not displaying anything. Just a blank page. I'm running this on the default python server. Any idea why this is happening?
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"/>
<link rel="import" href="bower_components/polymer/polymer.html"/>
</head>
<body>
<hello-element></hello-element>
<dom-module id="hello-element">
<template>Hello World</template>
</dom-module>
<script>
HTMLImports.whenReady( function () {
Polymer({
is: "hello-element"
})
})
</script>
</body>
</html
First of all, your closing html tag is malformed. It should be </html> instead of <html. Perhaps you made a mistake while copying, but you should check just in case.
In addition, your script element should have a closing tag, like so:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
Furthermore, the link tag should not have this slash / before closing it, like so:
<link rel="import" href="bower_components/polymer/polymer.html">
Try to use HTML tags Properly. In HTML5, so-called void elements (elements that can't have content -> link,meta) don't need the closing, but when comes to tag it must be closing tag. It takes content between takes as javascript code.
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
Try to use above format to get correct output. But avoid creating componments in Main document. Create in other file and import it
I created a new polymer app using AppToolbox (polymer cli) and now I'm trying to add a theme that I download from Polymer Theme. I follow the instructions:
Add the following line inside your tag
AFTER the webcomponents-lite.min.js and other HTML imports.
<link rel="import" href="path/to/theme.html">
To use the theme within your custom element, add the following line
inside your tag:
<link rel="import" href="path/to/theme.css" type="css">
Of course I removed some css styles in the example components but I don't see the template applied to the project.
Could anyone give me some advice about this?
Instructions:
TL;DR The only method that seems to allow those themes to work properly with Polymer 1.5.0 is to link the provided stylesheet in index.html with:
<link rel="stylesheet" href="path/to/theme.css">
plunker
The instructions from https://polymerthemes.com/ to import the CSS theme in your <dom-module> align with Polymer's documentation on importing external stylesheets, but the support for that import-type is deprecated in favor of style modules.
However, even style modules don't allow full theming in my experiments.
Trials:
Importing the provided theme in the <dom-module> (deprecated):
<dom-module id="x-button">
<link rel="import" type="css" href="theme.css"> <!-- partial styling -->
...
</dom-module>
Result: Styles are restricted to the custom element, but no font styling. plunker
Converting the provided theme into a style module, and including it in the <dom-module>:
<link rel="import" href="theme.html">
<dom-module id="x-button">
<style is="custom-style" include="theme"></style> <!-- partial styling -->
...
</dom-module>
Result: (same effect as Trial 1) plunker
Linking the provided stylesheet in <dom-module>:
<dom-module id="x-button">
<link rel="stylesheet" href="theme.css"> <!-- full styling, leaks -->
...
</dom-module>
Result: x-button fully styled as intended, but styles leak into main page, modifying the background color and a paper-button of the main page. plunker
Linking the provided stylesheet only in index.html:
<head>
<link rel="stylesheet" href="theme.css"> <!-- full styling -->
...
</head>
<body>
<x-button></x-button>
</body>
Result: x-button fully styled as intended. plunker
Say I've got one polymer app test-app, one regular div div-a, and one polymer element page-a.
Now I'm trying to build a animated-pages, which contains div-a and page-a
<link rel="import" href="../../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../../bower_components/core-icons/core-icons.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../page-a/page-a.html">
<polymer-element name="test-app" flex vertical layout>
<template>
<core-animated-pages
selected="{{selected}}"
transitions="cross-fade"
>
<section name="div-a">
<div cross-fade>
<span>div-a</span>
</div>
</section>
<section name="page-a">
<page-a cross-fade></page-a>
</section>
</core-animated-pages>
</template>
<script src="./test-app.js"></script>
</polymer-element>
The problem is: when performing the transition, the animation on div-a works fine, but the one on page-a doesnot work. Instead of fading in, the page-a just suddenly appears.
Another strange point is: if I change transitions="cross-fade" into transitions="cross-fade-all", and remove other cross-fade defined on div and page-a, both transitions work find.
Any idea?
Cross-fade doesn't work directly on elements that have overflow: hidden set.
I'm creating a custom element with Polymer to embed a Medium profile card. The embed code provided by Medium is,
<script async src="https://static.medium.com/embed.js"></script>
<a class="m-profile" href="https://medium.com/#pankajparashar">Pankaj Parashar</a>
The code for my custom element looks like this,
<link rel="import" href="bower_components/polymer/polymer.html">
<script async src="https://static.medium.com/embed.js"></script>
<polymer-element name="medium-card">
<template>
<a class="m-profile" href="https://medium.com/#pankajparashar">Pankaj Parashar</a>
</template>
<script>
Polymer('medium-card', {});
</script>
</polymer-element>
I've noticed that the script doesn't load when it is included inside the custom element. Hence, I've added the external script embed.js outside the polymer-element tag. Although, the external script now loads, it doesn't embed the profile card at all.
Is something wrong the way the external script is used? I do not really want to use the iframe technique either.
I am trying to figure out if it is possible to inline external javascripts in my Polymer elements. I know if I have a link to a stylesheet then it gets merged (from http://www.polymer-project.org/docs/polymer/styling.html):
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my-element.css">
...
</template>
<script>
Polymer('my-element',...);
</script>
</polymer>
Polymer will automatically inline the my-element.css stylesheet using a :
<polymer-element ...>
<template>
<style>.../* Styles from my-element.css */...</style>
...
</template>
<script>
Polymer('my-element',...);
</script>
</polymer>
I am looking for a way to do the same with external javascript files:
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my-element.css">
...
</template>
<script src="my-element.js">
</polymer>
and get something like this:
<polymer-element ...>
<template>
<style>.../* Styles from my-element.css */...</style>
...
</template>
<script>.../* code from my-element.js */...</script>
</polymer>
I looked at vulcanize (https://github.com/Polymer/vulcanize) but it does not seem to be able to do it.
EDIT:
let me rephrase what I want to achieve:
I know that when vulcan processes a HTML page that contains elements, it merges the templates of these elements into the resulting output, and (given the --csp option) it also creates a javascript file where it puts all embedded scripts of the elements. I want to be able to merge into the resulting .js file not only embedded scripts but also scripts that are linked to from my elements.
It should work as you wrote it, except that <script> requires a closing tag. I.e.
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my-element.css">
...
</template>
<script src="my-element.js"></script>
</polymer>
Fwiw, the script in either case is loaded and executed normally by the browser. In that sense, it's different from the stylesheet link which is a feature being simulated by Polymer.
For the same reason, you can load/run that script anywhere. The tag doesn't have to be inside the <polymer-element>.