在聚合物 3.0 应用中使用聚合物 2.0 组件



目前我将Polymer 2.0应用程序迁移到Polymer 3.0。但目前可以理解的是,许多组件仍未迁移(例如 vaadin-gid 作为一个例子(。

如何在迁移的 Polymer 3 应用中使用这些 Polymer 2 组件?

基本上将此代码添加到<head>并删除/bower_components/polymer文件夹

<script type="module">
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
window.Polymer = {
Element: PolymerElement
};
window.loadElement = function(filename) {
var l = document.createElement('link');
l.rel = 'import';
l.href = filename
var h = document.getElementsByTagName('head')[0];
h.parentNode.insertBefore(l, h);
}
// Load de main element
loadElement('/main-poly2.html');
</script>

在聚合物 2 中加载聚合物 3 元素

<script type="module">
import './poly3-element'
class MainPoly2 extends Polymer.Element {
...
}
</script>

在聚合物 3 中加载聚合物 2 元素

import {PolymerElement, html} from '/node_modules/@polymer/polymer/polymer-element.js';
loadElement('/poly2-element.html');
class Poly3Element extends PolymerElement {
....
}

我写一个例子:

https://github.com/herberthobregon/polymer2-3

它有效,但聚合物团队尚未回答我是否实现正确,但有效

我的解决方案是使用聚合物调制器将聚合物2.0元素升级到聚合物3.0

[https://polymer-library.polymer-project.org/3.0/docs/upgrade][1]

最新更新