Javascript 如何将web组件分离到单个文件并加载它们？_Javascript_Html_Templates_Web Component_Separation Of Concerns

Javascript 如何将web组件分离到单个文件并加载它们？

javascript html templates

Javascript 如何将web组件分离到单个文件并加载它们？,javascript,html,templates,web-component,separation-of-concerns,Javascript,Html,Templates,Web Component,Separation Of Concerns,我有一个web组件x-counter，它位于单个文件中 const template = document.createElement('template'); template.innerHTML = ` <style> button, p { display: inline-block; } </style> <button aria-label="decrement">-</button> &l

我有一个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);

const template=document.createElement（'template'）；
template.innerHTML=`
按钮，p{
显示：内联块；
}
-
0
+
`;
类XCounter扩展HtmleElement{
设定值（值）{
此值为._值=值；
this.valueElement.innerText=此值；
}
获取值（）{
返回此值；
}
构造函数（）{
超级（）；
该值为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]；
这是一个.incrementButton
.addEventListener（'click'，（e）=>this.value++）；
这个。递减按钮
.addEventListener（'click'，（e）=>此.value--）；
}
}
自定义元素。定义（'x计数器'，x计数器）；

在这里，模板被定义为使用JavaScript，html内容被添加为内联字符串。有没有办法将模板分离到

x-counter.html

文件中，也就是说，

x-counter.css

和相应的JavaScript代码到

xcounter.js

中，并将它们加载到index.html中

我查找的每个示例都混合了web组件。我希望分离关注点，但我不确定如何使用组件来实现这一点。你能提供一个示例代码吗？谢谢。

在主文件中，使用

加载Javascript文件

x-counter.js

在Javascript文件中，使用

fetch（）

加载HTML代码

x-counter.HTML

在HTML文件中，使用

加载CSS文件

x-counter.CSS

CSS文件：
x-counter.CSS

按钮，p{
显示：内联块；
颜色：淡蓝色；
}

HTML文件：
x-counter.HTML

<link rel="stylesheet" href="x-counter.css">
<button aria-label="decrement">-</button>
    <p>0</p>
<button aria-label="increment">+</button>

<html>
<head>
    <!-- ... -->
    <script src="x-counter.js"></script>
</head>
<body>
    <x-counter></x-counter>
</body>
</html>

主文件：
index.html

<link rel="stylesheet" href="x-counter.css">
<button aria-label="decrement">-</button>
    <p>0</p>
<button aria-label="increment">+</button>

<html>
<head>
    <!-- ... -->
    <script src="x-counter.js"></script>
</head>
<body>
    <x-counter></x-counter>
</body>
</html>

回答得真不错！假设您想对x-count.js web组件进行单元测试？你会怎么做？例如，如果您想使用karma进行一个非常基本的单元测试，只是为了检查webcomponet是否已呈现，那么如何实现该测试？@JimC我不使用karma，但我认为您可以像检查任何其他元素一样检查自定义元素的html内容。我知道你可以用Chai.js+Selenium Webdriver来实现这一点