I noticed that polymer has single import files for polymer-elements (https://github.com/PolymerLabs/polymer-elements/blob/master/polymer-elements.html) and polymer-ui-elements (https://github.com/PolymerLabs/polymer-ui-elements/blob/master/polymer-ui-elements.html), but not core-elements. There is a metadata.html inside Polymer/core-elements (https://github.com/Polymer/core-elements/blob/master/metadata.html), but that definitely doesn't look like a complete list, and the purpose of that file isn't abundantly clear (there are actually several metadata.html files in these repositories, and I'm not sure what they are use for). Is there an official single import file for polymer core-elements anywhere?
Good point! I've just added one: https://github.com/Polymer/core-elements/commit/231425c
polymer-elements & polymer-ui-elements are now deprecated. For now use the single repositories for the core-elements & paper-elements (the Material Design elements). These are the officially supported element collections for Polymer and they are listed on the Polymer docs.
Note that this will likely change in upcoming releases where elements may not be in the same collections, but as of 0.5 the collections of elements are mostly complete & listed in the docs.
Related
Is there a way I can make Polymer WebComponents and LitElements coexist?
It should be doable in theory, but afaik you cannot import html in LitElements, so it is actually infeasible.
This issue try to address the problem https://github.com/Polymer/lit-element/issues/48
Is there a way to use importHref in LitElement?
You cannot import HTML into anything but another Polymer 2/HTML element. If you are dealing with Polymer 2 elements from Google--paper-input, iron-dropdown, etc.--use npm to install their Polymer 3.0 version. If your HTML elements are from another source, you will have to rewrite them. I was able to use polymer-modulizer to convert some simple elements to JavaScript, but it was not up to a more complex element (15 components and 5 mix-ins). (Even those that did convert I ended up rewriting to LitElement.)
What exactly is HTML Modules? I understand that it might allow a developer to create HTML as a module like how ES6 Modules are to JavaScript.
But, are these modules basically templates like Mustache, Handlebars and Pug? Or is it like a wrapper around a similar templating system that will allow us to import an HTML file easily into another HTML file?
Will it pave a way to avoid using templating libraries utilizing the Web Components?
[Update]
Here is the link to where I found this - https://github.com/w3c/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md
HTML Modules are the new proposal for importing HTML files into a document.
HTML import supported a similar feature and permitted to import an HTML file (eventually containing itself JS and CSS) but it has been deprecated and JS module import has partially substituted that feature.
The point of HTML imports are to complete that part and make possible to import HTML files again instead of JavaScript files only.
Today you just can't import files that contain HTML (again, you could do that when meta rel=import href=myfile.html> which is not supported anymore).
If you want to do that, you have to write HTML in JavaScript string prior to process it.
The proposal also introduces notions such as import.meta.document that refer to the internal document to be imported.
Note that is it a proposal, even though it could be inserted into the spec, it should then be implemented by browsers, and finally adopted by the community in order to remain and become a stable feature.
Currently the closest you can use is the Lego Web-Component library that allows to include HTML as a module and extends native HTML functionality:
<template>
<p>Hello World!</p>
</template>
Used as:
<script src="./dist/index.js" type="module"></script>
<hello-world />
Example taken from https://github.com/polight/lego#hello-world
Let's see how the spec is going to evolve for HTML Modules in the future…
In my react projects I have been using ES6 modules for some time. In my react component I would use import:
import {f1,f2} from "./myLib";
In my polymer component I use a script tag:
<script src="./myLib.js"></script>
If I'm not mistaken, these are doing two totally different things. The script tag is polluting my global namespace for the whole app. The import isn't.
Question #1: Am I correct in my understanding of this?
Question #2: Is there a way to get something similar in polymer?
I have dozens of different polymer components. Some import conflicting libraries. Then, if I have a page that uses multiple components it seems like a crap shoot as to which version of the JS script I will get.
It is certainly possible to use ES6 modules with Polymer. First thing you will have to do is split the template and script. You can then go both ways
Add a script tag containing transpiled ES6 code to the element's html:
<dom-module id="my-elem"></dom-module>
<script src="my-elem.js"></script>
Use some kind of plugin to import HTML from ES6 code. This is, for example, possible with this plugin for SystemJS
import './my-elem.html!';
class MyElem extends HTMLElement {}
document.registerElement('my-elem', MyElem);
Then the difficult part is then transpiling. I'm not sure about other module loaders, but with JSPM+SystemJS it is easy to bundle as an Universal module. This way your element will be usable both by <link rel="import" href="bower_components/my-elem/my-elem.html"> and for importing from other ES6 code. In the former case any dependencies not bundled will have to live in the global scope. You could, however, place any such dependencies in your main html file. Just like many other elements are published.
If you're willing to give JSPM+SystemJS a try, please have a look at a blog post on my blog. I'm using TypeScript but for ES6 the general solution should be roughly the same.
I'm getting into Polymer and i like the deps resolution approach using imports.
And i like the extending capability through the behaviors config.
However, there's something that doesn't feel comfortable to me, about behaviors in particular.
Looking at the PolymerElements code i see that behaviors, are defined inside their own html in the global object Polymer and then referenced directly when imported by another component..
For example:
paper-button imports paper-button-behavior
https://github.com/PolymerElements/paper-button/blob/master/paper-button.html#L14
it then defines paper-button-behavior as behavior referencing from global Polymer.PaperButtonBehavior
https://github.com/PolymerElements/paper-button/blob/master/paper-button.html#L144
wich is defined here (the imported html)
https://github.com/PolymerElements/paper-behaviors/blob/master/paper-button-behavior.html#L49
Ain't it an anti-pattern, especially as typically an app will not use Polymer's world exclusively?
My application does not have multiple documents. So I do not need the tab shown in LayoutDocumentPane. I found that it can be customized by using style here. http://avalondock.codeplex.com/wikipage?title=Document%20tab%20restyling
But it seems to be over complicated. Is there any simple way of doing this ?
If you don't need multiple documents, you probably don't need documents at all. You should put your content in a normal dockable panel.
In AvalonDock 2.x you could use LayoutAnchorable and in 1.x use DockableContent, both nested in suitable containers of course.
In avalondock 1.x there is a property that does just what you need. Its called DocumentPane.ShowHeader.
It does not (yet?) exist on 2.x
If you want to modify avalondock to do what you need, I submitted a patch to the project that adds the feature.
Its included in this ticket: http://avalondock.codeplex.com/workitem/15626