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.)
Related
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…
For fast searching elements by Selenium, I think it must be a simple way to set some attributes to html-elements, for example: transform React Component Key to data-attribute (if it is possible).
Of course I can writing id or data-attributes to my span, div and whatever in my components, but I can't do it with components of 3d-party libraries - this components may haven't props like "id", and I will have to wrap this components and then find they by tag or class...
Or maybe is plugin for webpack to set data-attributes to elements with component's names.
However, how you find elements in your react app render?
I think it's not a good idea find elements by class or tags
key transform like this:
<MyComponent key="SuperComponent" />
...
<div data-attr="SuperComponent">...</div>
or autoset attributes of component name like this:
<MySuperComponent />
...
<div data-attr="MySuperComponent">...</div>
From "Test Automation through Selenium" perspective it hardly matters if the HTML consists of id or data-attributes. While working with Selenium tests are written with the help of any effective <tag> and the associated attributes. However there is a preferred list of Locator Strategies as follows:
How to find elements in react app render?
The AUT (Application Under Test) being ReactJS based of-coarse the element will be having dynamic attributes. Locator Strategies can also be dynamic. You can find an example usage of Dynamic Locator Strategies in the discussion How to locate a button with a dynamicID
Finally, while Test Automation the fast moving WebDriver instance will be needed to be synchronized with the lagging browser. You can find a relevant discussion in Do we have any generic funtion to check if page has completely loaded in Selenium
What is the minimum example, if any, using the Polymer PWA (https://polymer.github.io/pwa-starter-kit/), to show correctly a vaadin-grid?
I tried many different combinations, but never a working one, with, often, this warning:
property-accessors.js:275 Polymer::Attributes: couldn't decode Array as JSON
Am I doing anything totally wrong?
Thanks
Andrea
Starting from the v5.2.0-beta1 we recommend using following Grid features:
column helper elements (vaadin-grid-filter-column, vaadin-grid-sort-column)
column convenience properties (path, header and text-align)
renderers for more complex cases where you previously used templates
See the example here: https://glitch.com/edit/#!/lying-blanket?path=app.js:29:42
https://lying-blanket.glitch.me/
Note: I'm using fetch API here for simplicity only, you can use XHR if necessary.
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 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.