Web-компоненти

Web-компоненти - це сукупність елементів які створюють нові HTML елементи користувача.

Це дозволяє створювати веб-сайти за доромогою компонентно-орієнтоване програмування.

Web-компоненти використовують усі технології JavaScript, HTML, CSS.

customElements - елементи користувача
ShadowRoot - тіньовий DOM
HTML Template - шаблони

Для реєстрації web-компонента (елемента коростувача) використовується метод CustomElementRegistry.define().

Тіньовий DOM використовується щоб мати ізьоловане від основного дерево DOM.

Для шаблонів HTML використовується елемент template.

Приклад:

Компонент який містить поле для вводу тексту і показує кількість введених символів: <my-edit></my-edit>

class MyEdit extends HTMLElement{
	constructor(){
		super();
		var shadow=this.attachShadow({mode:'open'});
		this._textarea=document.createElement('textarea');
		this._textarea.oninput=function(){
			this._label.innerText='символів: '+this.value.length;
		}
		shadow.appendChild(this._textarea);
		this._textarea._label=document.createElement('label');
		shadow.appendChild(this._textarea._label);

		var style=document.createElement('style');
		style.textContent='textarea{width:100%;height:150px;} label{color:#807b7b;}';
		shadow.appendChild(style);
	}
	set value(text){
		this._textarea.value=text;
		this._textarea.oninput();
	}
	get value(){
		return this._textarea.value;
	}
}

customElements.define('my-edit', MyEdit);

Приклад використання шаблону HTML (template) для web-компонента:

Приклад web-компонента.

<template id="templat"><p id="content"></p>
<style>p{text-align:center;color:#3eefef;}</style>
</template>

<my-p>Приклад web-компонента.</my-p>

customElements.define('my-p', class extends HTMLElement{
	constructor(){
		super();
		var text=this.innerText;
		this.innerHTML='';
		var shadow=this.attachShadow({mode:'open'});
		var templat=document.getElementById('templat').content.cloneNode(true);
		templat.querySelector('#content').innerText=text;
		shadow.appendChild( templat );
	}
});