Element.attachShadow()

Element.attachShadow() - додає тіньовий DOM в елемент.

var shadow = Element.attachShadow(shadowRootInit);

Параметри:

shadow - змінна якій присвоюється об'єкт ShadowRoot.

Element - об'єкт Element для якого необхідно додати тіньовий DOM.

shadowRootInit - об'єкт з параметрами тіньового DOM.

mode - режим інкапсуляції для тіньового дерева DOM. Можливі режими:
- "open" - елементи тіньового кореня доступні з JavaScript поза коренем, наприклад, використовуючи Element.shadowRoot.
- "closed" - забороняє доступ до вузлів закритого кореня тіні.
delegatesFocus - логічне значення true або false. Чи включити поведінку яка пом'якшує проблеми елементів користувача навколо фокусування.

Опис:

attachShadow() метод об'єкта Element який додає до елемента тіньовий DOM.

Метод повертає новостворений об'єкт ShadowRoot.

Тіньовий DOM може бути доданий до таких елементів: елемент користувача, article, aside, blockquote, body, div, footer, h1, h2, h3, h4, h5, h6, header, main, nav, p, section, span.

Тіньовий DOM можна додати лише один раз до елементу. Якщо викликати метод attachShadow() двічі тоді виникне помилка: InvalidStateError: Не вдалося виконати 'attachShadow()' в 'Element': Shadow Root НЕ може бути створений в елементі, в якому вже розміщено тіньовий DOM.

Приклад:

Приклад компонента зображення з текстом. <my-img text="Приклад my-img" src="/dani/test.png"></my-img>

class MyImg extends HTMLElement{
	constructor(){
		super();
		var shadow=this.attachShadow({mode:'open'});
		var div = document.createElement('div');
		div.className='my-img-conteiner';
		this._img=document.createElement('img');
		this._img.src=this.getAttribute('src');
		this._img.className='my-img-img';
		div.appendChild(this._img);

		this._text=document.createElement('div');
		this._text.className='my-img-text';
		this._text.innerText=this.getAttribute('text');
		div.appendChild(this._text);

		var style=document.createElement('style');
		style.textContent='.my-img-conteiner{text-align:center;}.my-img-img{padding:1px;}.my-img-text{color:#737373;}';
		shadow.append(div);
		shadow.append(style);
	}
	set src(value){
		this.setAttribute('src', value);
		this._img.src=value;
	}
	get src(){
		return this._img.src;
	}
	set text(value){
		this.setAttribute('text', value);
		this._text.innerText=value;
	}
	get text(){
		return this._text.innerText;
	}
}

customElements.define("my-img", MyImg);