I'm working on a generic web component, wrapping a jquery based grid library with Polymer. I'm finding that the custom themes that come with the library work fine if I use the default shady DOM global setting, but will need significant adjustments to make them work when using shadow DOM.
The question is how best to support both?
Naively, I would want something like this pseudo markup to work:
<link if="shadowDom" rel="import" href="css/shadowDomStyles.html">
<dom-module id="my-grid">
<template>
<link if="shadyDom" rel="stylesheet" href="css/shadyDomStyles.css" type="text/css"/>
<style if="shadowDom" include="shadow-dom-styles"></style>
</template>
</dom-module>
And I would want only the files needed as specified by the global setting, so shadyDomStyles.css would not be requested if shadow dom is enabled, and shadowDomStyles.html would not be requested if shady dom is enabled.
Any suggestions?
Related
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
I would like to know if there are any CDNs for polymer elements, since you have to always download the elements and It would be more convinient to import it via cdn. Can't find any on google? Also are there any reasons that it does not exists or just because it is so new?
There is now!
I created this GitHub repository specifically for this purpose:
download/polymer-cdn
All GitHub repositories are automatically in CDN through RawGit. So, using that, we can now import Polymer elements using markup like this (for iron-icons in this case):
<link rel="import"
href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/iron-icons/iron-icons.html">
The project structure was set up in such a way that imports from elements that you import (transitive dependencies) resolve correctly.
The readme for the repository has a list of all elements it contains.
Missing something? Let me know and I'll be happy to include it.
Try it
You can try it out right now by hacking on this Codepen:
Polymer-CDN Example.
Or you can run this code snippet:
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
<style is="custom-style">
:root {
--paper-tabs-selection-bar-color: var(--paper-light-blue-900);
--paper-tab-ink: var(--paper-light-blue-100);
--paper-tabs: {
color: white;
background-color: var(--paper-light-blue-500);
};
}
</style>
<div>
<paper-button raised><iron-icon icon="check"></iron-icon>OK</paper-button>
<paper-button raised><iron-icon icon="clear"></iron-icon>Cancel</paper-button>
</div>
<p><paper-checkbox>Checkbox</paper-checkbox></p>
<p><paper-toggle-button></paper-toggle-button></p>
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
You can also access polymer elements directly from polymer-project.org.
Example:
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-ajax/core-ajax.html">
This is an old question, but there is a non-hacky solution now: http://polygit.org/
It uses rawgit behind the curtains but provides a much nicer api.
I do not know any CDN hosting polymer elements right now and I assume it would be better to vulcanize them for a production environment but due to the fact that most of the elements are hosted on github you could link your imports to rawgit.com
Example:
<link rel="import" href="https://rawgit.com/Polymer/core-ajax/master/core-ajax.html">
You might take a look at cloudflares polymer CDN:
http://cdnjs.com/libraries/polymer
rawgit option
You would have to manage some dependencies manually since core-ajax.html returns 404 on polymer.html. Also rawgit.com cache is set to only 5 min (cache-control:max-age=300). 5 min cache is fine for version control, but it should be more for CDN (https://rawgit.com/Polymer/core-ajax/0.4.1/core-xhr.html). Also files are not minified.
vulcanize option
Probably best option before http/2 release. You would have to spend some time with configuration and integration into your build process. Also you don't have any CDN benefits (no data cost, already cached resources from third party domains.)
conclusion
There will be some CDN with minified polymer versions and long expires header on http/2 release. But I don't know about any right now.