是否可以将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>

EDIT1:

我使用相同的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

所以我尝试了以下组件：

导入测试.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 模板：

样式.css：

p {
    color: blue;
}

模板.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);

模板.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>
`;

样式.css：

p {
    color: blue;
}

和输出：

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