是否可以将 Polymer 3 组件拆分为单独的 JavaScript、HTML 和 CSS 文件？

Question

我正在尝试将 Polymer 3 组件拆分成单独的文件，例如：

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

export default class TestSplit extends PolymerElement {
  static get template() {
    return html`
      <style>
        p {
          color: blue;
        }
      </style>

      <p>Hello from component</p>
    `;
  }
}

customElements.define('test-split', TestSplit);

看起来像这样：

index.js:

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

import css from './style.css';
import template from './template.html';

export default class TestSplit extends PolymerElement {
  static get template() {
    return html`
      <style>${css}</style>
      ${template}
    `;
  }
}

customElements.define('test-split', TestSplit);

style.css:

p {         
  color: blue;          
}

template.html:

<p>Hello from component</p>

编辑 1:

我用相同的 template.html 和 style.css 文件尝试了以下代码：

导入-test.js:

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

export default class ImportTest extends PolymerElement {
  static get template() {
    let htmlTemplate = CssHtmlLoader.prototype.getHtmlTemplate('template.html');
      console.log(htmlTemplate)
      return htmlTemplate.then(function (file) {
        return html`
          <link rel="stylesheet" href="style.css"> 
          ${file}
        `;
      });  
    }
  }
}

customElements.define('import-test', ImportTest);

我从承诺中得到了正确的文件：

但我也收到以下错误：

知道代码有什么问题吗？

Answer 1

我认为，您想要导入 css 和 html 文件的方式是不可能的。它们是简单的 css/html 文件。他们不提供任何模块来导出这些文件。

只能导入导出的 javascript 模块。

我认为没有任何方法可以在 js 中导入 css 文件：

import css from './style.css'; // css can't be imported this way.

相反，您可以提供服务来获取这些文件：

假设，

已更新：

^{------------------------------------ ----------------------工作副本------------------------ ------------------------------------------}

template.service.js :

export class TemplateService {

  xhrCall(url) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.onload = () => resolve(xhr.responseText);
      xhr.onerror = () => reject(xhr.statusText);
      xhr.send();
    });
  }
  // As of now css is not dynamically included
  /*
  getCssTemplate(url) {
    return this.xhrCall(url);
  }
  */
  getHtmlTemplate(url) {
    return this.xhrCall(url);
  }

}

我的-view1.html :

<div class="card">
  <div class="circle">1</div>
  <h1>View One</h1>
  <p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
  <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
</div>

我的-view.html :

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

import { TemplateService } from './services/template.service.js';

class MyView1 extends PolymerElement {

  constructor() {
    super();
    this.tpl = new TemplateService();
    this.getView();  // <---------------call getView in the constructor.
  }

  static get template() {
    return html `<style include="shared-styles">
    :host {
      display: block;
      padding: 10px;
    }
    </style>
    `;
  }

  getView() {
    let template$ = this.tpl.getHtmlTemplate('src/templates/html/my-view1.html');
    // get the promise in a var above.
    template$.then(file => {
      let wrapperDiv = document.createElement('div'); // create a node
      wrapperDiv.innerHTML = file; // push the contents

      this._attachDom(wrapperDiv); // Attach the DOM to component's custom element**
    });
  }

}
window.customElements.define('my-view1', MyView1);

Answer 2

所以我尝试了以下组件：

导入-test.js

import { html, PolymerElement } from '@polymer/polymer/polymer-element';
import {htmlLiteral} from '@polymer/polymer/lib/utils/html-tag.js';
import CssHtmlLoader from './cssHtmlLoader';

export default class ImportTest extends PolymerElement {

  static get properties() {
    return {
      htmlTemplate:{
        type:String,
        notify:true,
        reflectToAttribute: true
      },
      helloWorld:{
        type:String,
        notify:true,
        reflectToAttribute: true,
        value: 'auto'
      }
    }
  }

  constructor(){
    super();
    var that = this;
    this.attachShadow({mode: 'open'});
    console.log(this.shadowRoot);
    this.htmlTemplate = CssHtmlLoader.prototype.getHtmlTemplate('templaten.html');
    this.htmlTemplate.then((template) => {
      console.log(that);
      that.shadowRoot.innerHTML = template
    });
  }
}

customElements.define('import-test', ImportTest);

使用以下 html 和 css 模板：

style.css:

p {
    color: blue;
}

template.html:

 link rel="stylesheet" href="style.css"> 
 <p>Hello from template [[helloWorld]]</p>

这是我的输出：

Hello PolymerImportTest-app!
Hello from template [[helloWorld]](this is blue so the css import works)

所以我的问题是我无法将属性绑定到 html 模板。

解决方案是将 html 模板放入单独的 javascript 文件中，然后我可以从那里导出它并在自定义组件中使用它（使用属性绑定工作）。

这是我的解决方案：

导入-test.js:

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

export default class ImportTest extends PolymerElement {

  static get properties() {
    return {
      helloWorld:{
        type:String,
        notify:true,
        reflectToAttribute: true,
        value: 'auto'
      }
    }
  }

  constructor(){
    super();
  }

  static get template() {
    return template;
  }

}

customElements.define('import-test', ImportTest);

template.js:

import {html} from '@polymer/polymer/polymer-element';

export const template=html`
<link rel="stylesheet" href="/src/PolymerImportTest-app/style.css">
<p>Hello from template [[helloWorld]]</p>
`;

style.css:

p {
    color: blue;
}

并且输出：

Hello PolymerImportTest-app!
Hello from template auto(blue and the property is correctly attached)

是否可以将 Polymer 3 组件拆分为单独的 JavaScript、HTML 和 CSS 文件？

Is it possible to split a Polymer 3 component into separated JavaScript, HTML, and CSS files?

javascript

polymer

polymer-3.x

假设，

已更新：

template.service.js :

我的-view1.html :

我的-view.html :