Recently I made the decision test out Polymer 0.8 rather than just read about it, however I've come across an error: "Uncaught ReferenceError: Polymer is not defined".
I have a feeling it's something really simple that I've missed I can't seem to figure it out.
Below is my code which I've literally copied and pasted from the feature overview document:
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<dom-module id="element-name">
<style>
/* CSS rules for your element */
</style>
<template>
<!-- local DOM for your element -->
<div>{{greeting}}</div> <!-- data bindings in local DOM -->
</template>
</dom-module>
<script>
// element registration
Polymer({
is: "element-name",
// add properties and methods on the element's prototype
properties: {
// declare properties for the element's public API
greeting: {
type: String,
value: "Hello!"
}
}
});
</script>
<element-name></element-name>
Thanks in advance.
webcomponents-lite.min.js is the Polyfill for Shadow DOM and html Imports you should add this to you main.html page and not in your custom component.
Instead you should add the Polymer Library where you have added the Polyfill.
Below is an example code:
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="element-name">
<style>
/* CSS rules for your element */
</style>
<template>
<!-- local DOM for your element -->
Related
I'm brand new to polymer (2.0), so I was just practicing with a sample application. I wanted to create a basic 'login' screen with two paper input fields.
I'll show you what I have got so far.
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="import" href="./bower_components/webcomponentsjs/webcomponents-lite.js">
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./testing/login-page.html">
</head>
<body unresolved>
<login-page></login-page>
</body>
</html>
And my login-page.html, which is in a folder called 'testing'
<dom-module id="login-page">
<template>
<h2>Hello!</h2>
<paper-input label="test">test</paper-input>
</template>
<script>
Polymer({
is: 'login-page',
properties: {
prop1: {
type: String,
value: 'login-page',
},
}
});
</script>
</dom-module>
I have installed the paper-input using bower with the following command: bower install paper-input
Problem is, it's not showing up, but it is present in the shadow dom when I inspect the page. Everything in the h2 tag is showing up. Again, I'm brand new to polymer, so is there something I'm doing wrong?
If you are using Polymer 2.0 you need to download elements with #2.0-preview suffix.
In your case
bower i --save PolymerElements/paper-input#2.0-preview
and then import it in your page
<link rel="import" href="/bower_components/paper-input/paper-input.html">
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
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>.
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