На днях вернулся к теме веб-компонет. Сделал простой репитер
С помощью изменения значения атрибута элемента можно менять кол-во выводимых шаблонов:
<x-repeat count="1">
<!-- html here -->
</x-repeat>
Полный код страницы
<!DOCTYPE html>
<html>
<head>
<title>Web Components: Hello World</title>
<meta charset="utf-8">
<!--<script src="../../node_modules/babel/browser-polyfill.js"></script>-->
<!--<script src="../../node_modules/webcomponents.js/webcomponents.min.js"></script>-->
</head>
<body>
<h1>Web Components: Hello World</h1>
<hr/>
<section>
<h2>Template</h2>
<x-repeat count="1" id="test-repeat">
<span>test_1</span>
<span>test_2</span>
</x-repeat>
</section>
<hr/>
<section>
<h2>Controls</h2>
<label>count</label>
<input type="number" value="1" id="test-input"/>
</section>
<script src="script.js"></script>
<script src="HtmlXRepeatElement.js"></script>
</body>
</html>
Класс, описывающий компонет выглядит так
const TAG_NAME = `x-repeat`;
export default class HtmlXRepeatElement extends HTMLElement {
// [url]https://learn.javascript.ru/webcomponent-core#жизненный-цикл[/url]
render() {
var count = Number(this.getAttribute('count')) || 0;
var fragment = document.createDocumentFragment();
this.innerHTML = null;
for(var i = 0; i < count; i++) {
fragment.appendChild(this.__getTemplate());
}
this.appendChild(fragment);
}
createdCallback() {
// 1: save template
this.__saveTemplate();
}
attachedCallback() {
//2:
this.render();
}
detachedCallback() {
this.__clearTemplate();
}
attributeChangedCallback(name, prevValue, newValue) {
this.render();
}
__saveTemplate() {
var fragment = document.createDocumentFragment();
var childNodes = this.childNodes;
while(childNodes[0]) {
fragment.appendChild(childNodes[0]);
}
this.__template = fragment;
}
__getTemplate() {
return this.__template.cloneNode(true);
}
__clearTemplate() {
this.__template = null;
}
static register(document) {
document.registerElement(TAG_NAME, {
prototype: HtmlXRepeatElement.prototype
});
}
}
Рабочая песочница (es5) (Хром, наверно...). Код es6 + модуль можно посмотреть там же.
Разумеется, вся прелесть в том, что таких элементов
<x-repeat count="1">
<!-- html here -->
</x-repeat>
с разным содержимом можно навтыкать на странице сколько угодно)