javascript - 根据 Polymer 3.0 使用 JS/HTML 文件加载元素的布局

Question

HTML 文件：=== === === === === ===

<script type = "module">
import { PolymerElement } from '@polymer/polymer/polymer-element.js';

class QyInsights extends PolymerElement {

    static get template() {
        // Template getter must return an instance of HTMLTemplateElement.
        // The html helper function makes this easy.
        return html `

    <style include="qy-app-theme shared-styles granite-bootstrap iron-flex iron-flex-alignment">
      :host{
      }  

    </style>
    <qy-insights>
        Elements content need to load in main template.
    <qy-insights>
    `;
    }



    static get is() {
        return 'qy-insights';
    }

    static get properties() {
        return {
            productsWithPotential: String,


        }
    }

    connectedCallback() {
        super.connectedCallback();
        this._onInit();
    }

    ready() {
        super.ready();
    }

    attached() {
        lang.translate(this);
        //tour.start();         
        document.title = lang.get('insights') + ' | Qymatix';
    }

    _onInit() {
        lang.translate(this);
        //tour.start();         
        document.title = lang.get('insights') + ' | Qymatix';
    }

    _getLabel(key) {
        return lang.get(key);
    }


}

customElements.define(QyInsights.is, QyInsights);

</script>

JS文件：=== === === === === ===

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

import {} from '@polymer/polymer/lib/legacy/polymer.dom.js';

class QyInsights extends PolymerElement {


    static get template() {
        // Template getter must return an instance of HTMLTemplateElement.
        // The html helper function makes this easy.
        return html `

    <style include="qy-app-theme shared-styles granite-bootstrap iron-flex iron-flex-alignment">
      :host{
      }  

    </style>
    <qy-insights>
    Elements content need to load in main template.
    <qy-insights>
    `;
    }




    static get is() {
        return 'qy-insights';
    }

    static get properties() {
        return {
            productsWithPotential: String,


        }
    }

    connectedCallback() {
        super.connectedCallback();
        this._onInit();
    }

    ready() {
        super.ready();
    }

    attached() {
        lang.translate(this);
        //tour.start();         
        document.title = lang.get('insights') + ' | Qymatix';
    }

    _onInit() {
        lang.translate(this);
        //tour.start();         
        document.title = lang.get('insights') + ' | Qymatix';
    }

    _getLabel(key) {
        return lang.get(key);
    }


}

customElements.define(QyInsights.is, QyInsights);

标签： javascriptpolymer-3.x