如何将 Web 组件分离到单个文件并加载它们?
How to separate web components to individual files and load them?
我有一个 Web 组件 x-counter
,它在一个文件中。
const template = document.createElement('template');
template.innerHTML = `
<style>
button, p {
display: inline-block;
}
</style>
<button aria-label="decrement">-</button>
<p>0</p>
<button aria-label="increment">+</button>
`;
class XCounter extends HTMLElement {
set value(value) {
this._value = value;
this.valueElement.innerText = this._value;
}
get value() {
return this._value;
}
constructor() {
super();
this._value = 0;
this.root = this.attachShadow({ mode: 'open' });
this.root.appendChild(template.content.cloneNode(true));
this.valueElement = this.root.querySelector('p');
this.incrementButton = this.root.querySelectorAll('button')[1];
this.decrementButton = this.root.querySelectorAll('button')[0];
this.incrementButton
.addEventListener('click', (e) => this.value++);
this.decrementButton
.addEventListener('click', (e) => this.value--);
}
}
customElements.define('x-counter', XCounter);
此处模板定义为使用 JavaScript 和 html 内容添加为内联字符串。有没有办法将模板分离到 x-counter.html
文件,css 说,x-counter.css
和相应的 JavaScript 代码到 xcounter.js
并将它们加载到 index.html?
我查找的每个示例都混合了 Web 组件。我想分离关注点,但我不确定如何使用组件来做到这一点。你能提供一个示例代码吗?谢谢。
在主文件中,使用<script>
加载Javascript文件x-counter.js
。
在Javascript文件中,使用fetch()
加载HTML代码x-counter.html
。
在HTML文件中,使用<link rel="stylesheet">
加载CSS文件x-counter.css
.
CSS 文件:x-counter.css
button, p {
display: inline-block;
color: dodgerblue;
}
HTML 文件:x-counter.html
<link rel="stylesheet" href="x-counter.css">
<button aria-label="decrement">-</button>
<p>0</p>
<button aria-label="increment">+</button>
Javascript 文件:x-counter.js
fetch("x-counter.html")
.then(stream => stream.text())
.then(text => define(text));
function define(html) {
class XCounter extends HTMLElement {
set value(value) {
this._value = value;
this.valueElement.innerText = this._value;
}
get value() {
return this._value;
}
constructor() {
super();
this._value = 0;
var shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = html;
this.valueElement = shadow.querySelector('p');
var incrementButton = shadow.querySelectorAll('button')[1];
var decrementButton = shadow.querySelectorAll('button')[0];
incrementButton.onclick = () => this.value++;
decrementButton.onclick = () => this.value--;
}
}
customElements.define('x-counter', XCounter);
}
主文件:index.html
<html>
<head>
<!-- ... -->
<script src="x-counter.js"></script>
</head>
<body>
<x-counter></x-counter>
</body>
</html>
我有一个 Web 组件 x-counter
,它在一个文件中。
const template = document.createElement('template');
template.innerHTML = `
<style>
button, p {
display: inline-block;
}
</style>
<button aria-label="decrement">-</button>
<p>0</p>
<button aria-label="increment">+</button>
`;
class XCounter extends HTMLElement {
set value(value) {
this._value = value;
this.valueElement.innerText = this._value;
}
get value() {
return this._value;
}
constructor() {
super();
this._value = 0;
this.root = this.attachShadow({ mode: 'open' });
this.root.appendChild(template.content.cloneNode(true));
this.valueElement = this.root.querySelector('p');
this.incrementButton = this.root.querySelectorAll('button')[1];
this.decrementButton = this.root.querySelectorAll('button')[0];
this.incrementButton
.addEventListener('click', (e) => this.value++);
this.decrementButton
.addEventListener('click', (e) => this.value--);
}
}
customElements.define('x-counter', XCounter);
此处模板定义为使用 JavaScript 和 html 内容添加为内联字符串。有没有办法将模板分离到 x-counter.html
文件,css 说,x-counter.css
和相应的 JavaScript 代码到 xcounter.js
并将它们加载到 index.html?
我查找的每个示例都混合了 Web 组件。我想分离关注点,但我不确定如何使用组件来做到这一点。你能提供一个示例代码吗?谢谢。
在主文件中,使用<script>
加载Javascript文件x-counter.js
。
在Javascript文件中,使用fetch()
加载HTML代码x-counter.html
。
在HTML文件中,使用<link rel="stylesheet">
加载CSS文件x-counter.css
.
CSS 文件:x-counter.css
button, p {
display: inline-block;
color: dodgerblue;
}
HTML 文件:x-counter.html
<link rel="stylesheet" href="x-counter.css">
<button aria-label="decrement">-</button>
<p>0</p>
<button aria-label="increment">+</button>
Javascript 文件:x-counter.js
fetch("x-counter.html")
.then(stream => stream.text())
.then(text => define(text));
function define(html) {
class XCounter extends HTMLElement {
set value(value) {
this._value = value;
this.valueElement.innerText = this._value;
}
get value() {
return this._value;
}
constructor() {
super();
this._value = 0;
var shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = html;
this.valueElement = shadow.querySelector('p');
var incrementButton = shadow.querySelectorAll('button')[1];
var decrementButton = shadow.querySelectorAll('button')[0];
incrementButton.onclick = () => this.value++;
decrementButton.onclick = () => this.value--;
}
}
customElements.define('x-counter', XCounter);
}
主文件:index.html
<html>
<head>
<!-- ... -->
<script src="x-counter.js"></script>
</head>
<body>
<x-counter></x-counter>
</body>
</html>