Javascript 如何在烧瓶应用中使用聚合物元素作为静态资源？_Javascript_Python_Flask_Polymer

Javascript 如何在烧瓶应用中使用聚合物元素作为静态资源？

javascript python flask polymer

Javascript 如何在烧瓶应用中使用聚合物元素作为静态资源？,javascript,python,flask,polymer,Javascript,Python,Flask,Polymer,我使用的是Flask后端，但我想要一个javascript框架，可以为一些自定义组件注入，而不是整个页面。我已经试过Angular和React，现在我正试图得到一个使用Polymer 3.0的工作版本。但是，在尝试将元素导入flask模板页面之前，我在导入和/或构建元素方面遇到了问题到目前为止，我让它工作的唯一方法是： flask_template.html {% extends "base.html" %} <body> <base href="/demo_poly

我使用的是Flask后端，但我想要一个javascript框架，可以为一些自定义组件注入，而不是整个页面。我已经试过Angular和React，现在我正试图得到一个使用Polymer 3.0的工作版本。但是，在尝试将元素导入flask模板页面之前，我在导入和/或构建元素方面遇到了问题

到目前为止，我让它工作的唯一方法是：

flask_template.html

{% extends "base.html" %}
<body>
    <base href="/demo_polymer">
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    {% block body %}
    <script src="/static/polymer-assets/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script type="module" src="/static/polymer-assets/polymer-switch.js"></script>
    <div id="switch">
        <div class="card">
            <div class="card-content">
                <span class="card-title">Switch</span>
                <form id="form_name">
                    <div>
                        <polymer-switch id="switch1" name="sliderSwitch" checked></polymer-switch>
                    </div>
                    <input id="testInputText" name="testInputText" type="text" value="testInputText">
                    <input type="submit" value="SUBMIT">
                </form>
            </div>
        </div>
    </div>
    {% endblock %}
</body>
</html>

{%extends“base.html”%}
{%block body%}
转换
{%endblock%}

polymer-switch.js

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

class PolymerSwitch extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {}
      </style>
      <div class="slider-switch" >
        <input class="slider-input" type="checkbox" checked={{checked}}>
        <div class="slider-groove">
          <span class="slider-button"></span>
          <span class="slider-content"></span>
        </div>
      </div>
    `;
  }
  static get properties() {
    return {
      checked: {
        type: Boolean,
        value: false
      }
    };
  }
  constructor() {
    super();
    console.log('slider-switch created!');
  }
  connectedCallback() {
    super.connectedCallback();
    console.log('slider-switch connected!');
  }
  ready() {
    super.ready();
  }
}
window.customElements.define('polymer-switch', PolymerSwitch);

从'@polymer/polymer/polymer element.js'导入{html，polymererelation}；
类PolymerSwitch扩展了polymrelation{
静态获取模板（）{
返回html`
：主机{}
`;
}
静态获取属性（）{
返回{
检查：{
类型：布尔型，
值：false
}
};
}
构造函数（）{
超级（）；
log（'slider-switch created！'）；
}
connectedCallback（）{
super.connectedCallback（）；
console.log（'slider-switch connected！'）；
}
就绪（）{
super.ready（）；
}
}
window.customElements.define（'polymer-switch'，polymer-switch'）；

并进入每个导入的javascript模块，将“@something…”更改为“/static/polymer assets/node_modules/@something…”

但是，这将导入每个模块，我只想导入一个文件，在导入描述该模块的文件后，该文件允许我在flask模板中的任何位置使用该元素。我还不能使用命令“polymer build--js compile”（或它的任何变体）来给我一个可以使用的文件。通常它会给我一个html文件，导入它会警告我，到3月份它将不再受支持，并且不会呈现自定义元素

在以下情况下，很难确定它应该如何工作：

Polymer正在进行第三次修订，因此我查找的每个教程可能都没有正确的语法
我试图以一种非标准的方式使用它（据我所知），将它作为一个附加组件，而不是一个单页应用程序
我完全可以思考如何将javascript文件构建成一个javascript文件，然后导入到我的页面并使用它

可能的副本