是否可以将Polymer 3组件拆分为单独的JavaSrcipt，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文件尝试了以下代码：

import-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);
  }

}

my-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>

my-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

所以我尝试了以下组件：

import-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文件中，然后我可以将其导出并在自定义组件中使用（具有适当的绑定功能）。

这是我的解决方法：

import-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)