javascript - 是否可以将 Polymer 3 组件拆分为单独的 JavaScript、HTML 和 CSS 文件?
问题描述
我正在尝试将 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);
样式.css:
p {
color: blue;
}
模板.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);
知道代码有什么问题吗?
解决方案
我认为,您想要导入 css 和 html 文件的方式是不可能的。它们是简单的 css/html 文件。他们不提供任何模块来导出这些文件。
只能导入导出的 javascript 模块。
我认为没有任何方法可以在 js 中导入 css 文件:
import css from './style.css'; // css can't be imported this way.
相反,您可以为获取这些文件提供服务:
比方说,
更新:
-------------------------------------------------- ----------工作副本-------------------------- ----------------------------
模板.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>
我的视图.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);
推荐阅读
- spring - Spring,测试时的不同行为
- java - 在java中打印棋盘网格?
- android - 错误:无法解决:com.squareup.sdk
- c# - 如何在 .Net Core 2.1 控制器中访问 Active Directory 组织信息
- android - 画布中心 0,0 是左上角如何使它成为屏幕的中心?
- scenekit - 为什么 SCNTechnique 没有像 SCNProgram 这样的 .library 属性?
- python - 多个条件检查以避免 twoSum 解决方案中的重复
- java - 使用递归方法反转链表
- go - 如何提取嵌套的 JSON 数据?
- python - Python字典中的变量作为值